javascript - 所有文本框中的协调输入

我有一个练习，但我不知道该怎么做。

用5个文本框构建一个控件，使所有文本框中的输入相关联。在一个框中更改输入将更改其余框中的输入。

class App extends Component {
 render() {
    return (
      <div>
        <MultiInput />
      </div>
    );
  }
}

function SameInput(props) {
  return <input type="text" name="sameInput"/>
}

class MultiInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "ho" };
  }

  onChange = (e) => {
    this.setState({ value: e.target.value });
  }

  render() {
    return <div>
      <SameInput value={this.state.value} onChange={this.onChange}></SameInput><br />
      <SameInput value={this.state.value} onChange={this.onChange}></SameInput><br />
      <SameInput value={this.state.value} onChange={this.onChange}></SameInput><br />
    </div>
  }
}

export default App;

最佳答案

您正在将onChange事件处理函数和值传递给SameInput功能组件，但实际上并未在输入元素的SameInput函数的输入文本字段中处理它们。

尝试以下更改，它将起作用

 function SameInput(props) {
     return <input type="text" name="sameInput" onChange={props.onChange} value={props.value}/>
  }