javascript - 当文本输入更改时更新组件列表中子组件的状态

Question

我的应用程序的组件树是这样的:

App.js

|

Signs.js

|

Sign.js

我的App.js父类有一个处于其状态的对象列表。每个对象都有这样的形式:

{id: 1, name: "signName", ranking: "good", description: "Some description"}

对象列表由 Signs.js 描述。组件和列表的每个元素由 Sign.js 表示组件。

每个Sign.js组件有<textarea>输入字段以修改标志的描述。

我想更改列表中状态为App.js的对象的描述用户更改输入后立即组件。

自从 onChange 以来我不明白该怎么做事件<textarea>将事件作为参数，但我还需要传递符号才能了解列表中的哪些符号被修改!

App.js组件:

class App extends Component {
  state = {
    signs: [
      {
        id: 1,
        name: "Aries",
        ranking: "Good",
        description: "Random description"
      },
      {
        id: 2,
        name: "Taurus",
        ranking: "Good",
        description: "Random description"
      },
      {
        id: 3,
        name: "Gemini",
        ranking: "Good",
        description: "Random description"
      }
    ]
  };

  handleChange = (event, sign) => {
    const signs = [...this.state.signs];
    const index = signs.indexOf(sign);
    signs[index] = { ...sign };
    signs[index].description = event.target.value;
    this.setState({ signs });
  };

  render() {
    return (
      <div className="App">
        <Signs
          signs={this.state.signs}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

Signs.js组件:

const Signs = ({ signs, onChange }) => {
  return (
    <div className="container">
      {signs.map(sign => (
        <Sign key={sign.id} sign={sign} onChange={onChange} />
      ))}
    </div>
  );
};

Sign.js组件:

const Sign = ({ sign, onChange }) => {
  return (
    <div className="container">
      <div className="row justify-content-center">
        <h3>{sign.name}</h3>
      </div> 
      <div className="row justify-content-center">
        <textarea
          onChange={() => onChange(sign)}
          value={sign.description}
        >
        </textarea>
      </div>
    </div>
  );
};

Answer 1

您忘记将事件传递给onChange:

//                v Accepts event
handleChange = (event, sign) => {...}

const Sign = ({ sign, onChange }) => {
  return (
    <div className="container">
      <div className="row justify-content-center">
        <h3>{sign.name}</h3>
      </div>
      <div className="row justify-content-center">
//                                        v Pass the event
        <textarea onChange={e => onChange(e, sign)} value={sign.description} />
      </div>
    </div>
  );
};

Side note: Be aware that you using "prop-drilling" (anti-pattern) when the application grows you may want to use Context API.