所有文本框中的協調輸入

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}/>
  }