将道具传递给子组件时,如何在onChange中设置状态?

时间:2019-04-08 19:56:46

标签: reactjs state onchange react-props

当我将prop传递给子组件时,无法在onChange函数中分配状态。我有一个表单,当用户提交时,它应该更新状态。

过去,我设置状态,但是没有传递道具,因为它位于同一文件中,但是现在我在函数中使用道具,所以我不确定如何设置状态。

const Child = props => {
return (
<div className='form'>
    <Form >
        <Form.Row>
            <Col>
                <Form.Control 
                name="studentName" 
                value={props.studentName} 
                placeholder="Student name" 
                onChange={this.change}  
                />
            </Col>
            <Col>
                <Form.Control 
                name="studentId" 
                value={props.studentId} 
                placeholder="StudentID" 
                onChange={e => this.change(e)}
                />
            </Col>
        </Form.Row>
    </Form>
</div>
)}

1 个答案:

答案 0 :(得分:1)

您需要将callback function作为prop传递给子组件。

props.onChange

然后在您的父级组件中使用setState处理状态。

查看更多信息:https://reactjs.org/docs/faq-functions.html

这里有个例子:

const Child = props => {
  return (
    <form onSubmit={props.onSubmit}>
      <input
        type="text"
        name="studentName"
        value={props.studentName}
        placeholder="Student name"
        onChange={props.onChange}
      />
      <button type="submit">submit</button>
    </form>
  );
};

class Parent extends React.Component {
  state = {
    data: ""
  };
  handleChange = e => {
    this.setState({
      data: e.target.value
    });
  };
  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state.data);
  };
  render() {
    return (
      <div>
        <Child onSubmit={this.handleSubmit} onChange={this.handleChange} />
        <p>{`state: ${JSON.stringify(this.state.data)}`}</p>
      </div>
    );
  }
}

如果您想要的是Child处理自己的状态,则可以使用React挂钩并将状态添加到功能组件(请参见useStateuseReducer挂钩https://reactjs.org/docs/hooks-reference.html#usestate或它是一个类组件。