更改父狀態以在輸入更改時對子級做出反應

Question

我有以下父組件：

   class NewPetForm extends React.Component {
     state = {
       name: '',
       age: '',
       animal: '',
       breed: ''
       };

    render() {

    return (
      <StyledNewPetForm >
        <Input label="name" />
        <Input label="age" />
        <Input label="animal"/>
        <Input label="breed"/>
        <Button type="submit" />
      </StyledNewPetForm>
    );
  }
}

以及以下子組件：

  class Input extends React.Component {
  render() {
    return (
      <StyledWrapper>
        <StyledInput
          value={this.props.test}
          type="text"
        />
      </StyledWrapper>
    );
  }
}

是否可以監聽子組件中所有輸入的變化並相應地更新狀態？

我要實現的基本上是將處理程序傳遞給不同的Inputs並動態更新狀態，因此可以重用Input組件。

changeHandler = (event,stateName) =>{
  this.setState({[stateName]:event.target.value]})
}
<Input changed={changeHandler(event,'name')}></Input>
<Input changed={changeHandler(event,'age')}></Input>
<Input changed={changeHandler(event,'breed')}></Input>
// Inside Input
<input onChange={this.props.changed}/>

感謝幫助！

Answer 1

是的，您可以這樣做，您可以將函數作為屬性傳遞給子元素，並在子元素發生更改時調用它。

這是一個例子：

class NewPetForm extends React.Component {
 state = {
   name: ''
 };

 onValueChange(key, event) {
    this.setState({[key]: event.target.value})
 }

 render() {
    return (
      <StyledNewPetForm >
        <Input value={this.state.name} onValueChange={this.onValueChange.bind(this, 'name')} />
      </StyledNewPetForm>
    );
 }
}

和孩子

class Input extends React.Component {
 render() {
     return (
      <StyledWrapper>
        <StyledInput
          onChange={this.props.onValueChange}
          value={this.props.value}
          type="text"
        />
      </StyledWrapper>
    );
  }
}

{[key]: event.target.value}似乎令人困惑，它只是使您可以使用字符串作為對象文字中的屬性名稱的新語法。

重要的部分是onChange={this.props.onValueChange} ，這里，當輸入值更改時，我將調用父函數NewPetForm.onValueChange 。