如何在react管理中使用自定义字段，实例为{ data：[...] }

import React, { Component } from 'react';

class CustomFields extends Component {
  constructor(props) {
    super(props);
    this.state = {
      customData: {}
    };
  }

  handleCustomFieldChange = (index, value) => {
    const { customData } = this.state;
    customData[index] = value;
    this.setState({ customData });
  }

  render() {
    const { data } = this.props;
    const { customData } = this.state;

    return (
      <div>
        {data.map((item, index) => (
          <div key={index}>
            <p>Data: {item}</p>
            <p>Custom Field: {customData[index]}</p>
          </div>
        ))}
        <input
          type="text"
          onChange={(e) => this.handleCustomFieldChange(index, e.target.value)}
        />
      </div>
    );
  }
}

export default CustomFields;

import React from 'react';
import CustomFields from './CustomFields';

const App = () => {
  const data = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      <h1>React Custom Fields Example</h1>
      <CustomFields data={data} />
    </div>
  );
};

export default App;