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

Question

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

建立一个有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;

Answer 1

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

尝试进行以下更改，它会起作用

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