如何在 React.JS 中将状态从子组件传递给父组件？

Question

我有一个包含 10 多个输入字段的表单，用于更新类的状态。为了让事情看起来更干净，我将所有带有标签的输入字段移动到一个单独的组件中，以便我可以为每个输入重新使用它。该组件采用 2 个参数，作为我主类中的子组件。子组件：    const Input = ({ name, placeholder }) => {      return (        <div className="wrapper">          <Row className="at_centre">            <Col sm="2" style={{ marginTop: "0.5%" }}><Form.Label>{ name }</Form.Label></Col>            <Col sm="5"><Form.Control placeholder={ placeholder }/></Col>          </Row>        </div>      )    }家长：    state = { name: '', description: '' }    handleSubmit = (e) => {        e.preventDefault()        console.log(this.state);    }    render(){        return(            <Form style={{ marginBottom: "5%", padding: 10 }} onSubmit={ this.handleSubmit } >                <Input name="Name: " placeholder="How is it called?" onChange={ (event) => this.setState({name: event.target.value}) }/>                <Input name="Description: " placeholder="Please describe how does it look like?" onChange={ (event) => this.setState({description: event.target.value}) }/>                <Button variant="outline-success" size="lg" type="submit" >SUBMIT</Button>            </Form>                    )    }在我这样做之后，我找不到如何在更改文本时从我的子组件更新状态的方法。我这样做的所有尝试要么使网站崩溃，要么什么也没做。我还是 React.js 的新手，所以任何反馈都值得赞赏。

Answer 1

将onChange事件传递给您的子组件并将其与Form.Control控件连接。

您的Input组件将是，

const Input = ({ name, placeholder, onChange }) => {

  return (

    <div className="wrapper">

      <Row className="at_centre">

        <Col sm="2" style={{ marginTop: "0.5%" }}>

          <Form.Label>{name}</Form.Label>

        </Col>

        <Col sm="5">

          <Form.Control onChange={onChange} placeholder={placeholder} />

        </Col>

      </Row>

    </div>

  );

};

你的Parent组件是，

class Parent extends React.Component {

  state = { name: "", description: "" };

  handleSubmit = e => {

    e.preventDefault();

    console.log(this.state);

  };

  render() {

    return (

      <Form

        style={{ marginBottom: "5%", padding: 10 }}

        onSubmit={this.handleSubmit}

      >

        <Input

          name="Name: "

          placeholder="How is it called?"

          onChange={event => this.setState({ name: event.target.value })}

        />

        <Input

          name="Description: "

          placeholder="Please describe how does it look like?"

          onChange={event => this.setState({ description: event.target.value })}

        />

        <Button variant="outline-success" size="lg" type="submit">

          SUBMIT

        </Button>

      </Form>

    );

  }

}

工作 Codesandbox在这里。

Answer 2

您必须构建所谓的受控组件。

const Input = ({ label, name, onChange, placeholder }) => (

        <div className="wrapper">

          <Row className="at_centre">

            <Col sm="2" style={{ marginTop: "0.5%" }}>

              <Form.Label>{ label }</Form.Label></Col>

            <Col sm="5">

              <Form.Control name={ name }

                            value={ value } 

                            placeholder={ placeholder }

                            onChange={ onChange }

               />

            </Col>

          </Row>

        </div>

      )

在你的父母那里，

state = { name: '', description: '' }

handleChange = ({ target: { name, value } }) => this.setState({ [name]: value })

render() {

 const { name, description } = this.state

  <Form style={{ marginBottom: "5%", padding: 10 }} onSubmit={ this.handleSubmit } >

    <Input label="Name: " name="name" value={name} onChange={handleChange}/>

    <Input label="Description: " description="description" value={description} onChange={handleChange}/>

    <Button variant="outline-success" size="lg" type="submit" >SUBMIT</Button>

  </Form>      

}

建议

尽量避免在渲染函数内部制造 lambda 方法，并有一个类属性作为 lambda 方法，这样就不需要在每个渲染周期都制造 lambda。