如何在 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 }) => {&nbsp; return (&nbsp; &nbsp; <div className="wrapper">&nbsp; &nbsp; &nbsp; <Row className="at_centre">&nbsp; &nbsp; &nbsp; &nbsp; <Col sm="2" style={{ marginTop: "0.5%" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Form.Label>{name}</Form.Label>&nbsp; &nbsp; &nbsp; &nbsp; </Col>&nbsp; &nbsp; &nbsp; &nbsp; <Col sm="5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Form.Control onChange={onChange} placeholder={placeholder} />&nbsp; &nbsp; &nbsp; &nbsp; </Col>&nbsp; &nbsp; &nbsp; </Row>&nbsp; &nbsp; </div>&nbsp; );};你的Parent组件是，class Parent extends React.Component {&nbsp; state = { name: "", description: "" };&nbsp; handleSubmit = e => {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; console.log(this.state);&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <Form&nbsp; &nbsp; &nbsp; &nbsp; style={{ marginBottom: "5%", padding: 10 }}&nbsp; &nbsp; &nbsp; &nbsp; onSubmit={this.handleSubmit}&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <Input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="Name: "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="How is it called?"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={event => this.setState({ name: event.target.value })}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <Input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="Description: "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Please describe how does it look like?"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={event => this.setState({ description: event.target.value })}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <Button variant="outline-success" size="lg" type="submit">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SUBMIT&nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; </Form>&nbsp; &nbsp; );&nbsp; }}工作 Codesandbox在这里。

Answer 2

您必须构建所谓的受控组件。const Input = ({ label, name, onChange, placeholder }) => (&nbsp; &nbsp; &nbsp; &nbsp; <div className="wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Row className="at_centre">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Col sm="2" style={{ marginTop: "0.5%" }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Form.Label>{ label }</Form.Label></Col>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Col sm="5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Form.Control name={ name }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={ value }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder={ placeholder }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={ onChange }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Col>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Row>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; )在你的父母那里，state = { name: '', description: '' }handleChange = ({ target: { name, value } }) => this.setState({ [name]: value })render() {&nbsp;const { name, description } = this.state&nbsp; <Form style={{ marginBottom: "5%", padding: 10 }} onSubmit={ this.handleSubmit } >&nbsp; &nbsp; <Input label="Name: " name="name" value={name} onChange={handleChange}/>&nbsp; &nbsp; <Input label="Description: " description="description" value={description} onChange={handleChange}/>&nbsp; &nbsp; <Button variant="outline-success" size="lg" type="submit" >SUBMIT</Button>&nbsp; </Form>&nbsp; &nbsp; &nbsp;&nbsp;}建议尽量避免在渲染函数内部制造 lambda 方法，并有一个类属性作为 lambda 方法，这样就不需要在每个渲染周期都制造 lambda。