Question

我这里有一个主类，它包含三个呈现Form组件的状态：

class MainApp extends React.Component{
 constructor(props){
   super(props);

   this.state = {
     fName: '',
     lName: '',
     email: ''
 }

render(){
  return(
     <div className="content">
          <Form formState={this.state}/>
     </div>
  )
}
}

然后在我的Form组件中我有ff代码：

class Form extends React.Component{
     constructor(props){
       super(props);

     }

    render(){
      return(
         <form>
            <input placeholder="First Name" value={this.props.formState.fName}
             onChange={e => this.setState({ this.props.formState.fName: e.target.value })}
         </form>
      )
    }
    }

运行此代码后，我收到错误消息，说它无法读取null的属性'fName'。

如何正确地将一个状态传递给它的子组件，以便它可以修改主要组件？

Answer 1

        class MainApp extends React.Component{
         constructor(props){
           super(props);

           this.state = {
             fName: '',
             lName: '',
             email: ''
         }
          this._handleChange = this._handleChange.bind(this);
        }

     //dynamically update the state value using name 

      _handleChange(e) {
            const { name, value } = e.target;
            this.setState({
                [name]: value
            });
        }

        render(){
          return(
             <div className="content">
                //You can pass state and onchange function as params
                  <Form formState={this.state} _handleChange={this._handleChange}/>
             </div>
          )
        }
        }



   class Form extends React.Component{
        constructor(props){
          super(props);
       }

        render(){
           return(
            <form>
                <input placeholder="First Name"
                 defaultValue={this.props.formState.fName} 
                 id="fName"
                 name="fName"
                 onChange={e => this.props._handleChange} />
            </form>
         )
       }
     }

Answer 2

您无法直接从子组件编辑父级状态。您应该定义将在父组件本身中更改父级状态的处理程序，并通过props将它们传递给子级。

父：

class MainApp extends React.Component{
 constructor(props){
   super(props);
   this.state = {
     fName: '',
     lName: '',
     email: ''
   }

   fNameOnChange = (value) => {
     this.setState({fName:value})
   }

   render(){
     return(
       <div className="content">
         <Form formState={this.state} fNameChange={this.fNameOnChange}/>
       </div>
     )
  }
}

子：

class Form extends React.Component{
 constructor(props){
   super(props);
 }

 render(){
   return(
      <form>
        <input placeholder="First Name" value={this.props.formState.fName}
        onChange={e => this.props.fNameChange(e.target.value))}
      </form>
    )
  }
}

Answer 3

您应该将函数作为prop传递，以更新父组件的状态。建议不要直接改变道具。

在您的父类中编写如下函数：

onChangeHandler (data) {
  this.setState({fname: data})
}

并将其传递给子组件，您可以将此方法称为 this.props.onChangeHandler(event.target.data) 来自儿童部分。

由于

Answer 4

我想知道为什么要将formState传递给表单本身。表格应该管理的是自己的状态。像Form一样改变MainApp的状态

进行双向绑定并不是一个好习惯

但是，如果由于某些原因，您需要在formState组件中提供MainApp的副本，那么您的Form组件应具有onSubmit回调方法。

class MainApp extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      form: null
    }
  }

  render() {
    return(
      <div className="content">
        <Form onSubmit={(form) => {
          this.setState({ form });
        })}/>
      </div>
    )
  }
}

class Form extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      fName: '',
      lName: '',
      email: ''
    }
  }


  render(){
    return(
        <form onSubmit={e => this.props.onSubmit(this.state) }>
          <input placeholder="First Name" value={this.props.formState.fName}
            onChange={e => this.setState({ this.props.formState.fName: e.target.value })}
        </form>
    )
  }
}

如何将状态作为道具传递，以便您可以修改它们

4 个答案: