Question

当我将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>
)}

Answer 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挂钩并将状态添加到功能组件（请参见useState或useReducer挂钩https://reactjs.org/docs/hooks-reference.html#usestate或它是一个类组件。

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

1 个答案: