javascript - ReactJS 将状态传递给另一个类

Question

我在访问其他组件的状态时遇到问题。我是使用reactjs的初学者。我仍然对如何使用状态和 Prop 感到困惑。我收到的输入将被设置为用户名状态，然后我将其传递给 formDetails 组件并在 handleSubmit 触发时使用它。有人可以帮助我吗？如果有任何意见、答案、建议，我将不胜感激。

//Components
 class DaysForm extends React.Component {
constructor() {
    super();
    this.state = {
        username: ""
    };
    this.updateInput = this.updateInput.bind(this);
}

onCalculate(e) {
    $("#myModal").modal();
}

updateInput(event) {
    this.setState({ username: event.target.value });
}

render() {
    return (
        <div>
            <p>How many days are in a full time working week?</p>
            <input
                type="text"
                className="form-control"
                onChange={this.updateInput}
            />
            <p>How many days a week will this employee work?</p>
            <input type="text" className="form-control" />
            <br />
            <center>
                <button
                    className="btn btn-default"
                    onClick={this.onCalculate.bind(this)}
                >
                    Calculate
                </button>
            </center>
        </div>
    );
}
}

class FormDetails extends React.Component {
constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
    //console.log here the state that is comming from the component
}

render() {
    return (
        <div>
            <p>Email Address:</p>
            <input type="text" className="form-control" />
            <p>Business Name:</p>
            <input type="text" className="form-control" />
            <p>Phone Number:</p>
            <input type="text" className="form-control" />
            <br />
            <center>
                <button
                    className="btn btn-default"
                    onClick={this.handleSubmit}
                >
                    Submit
                </button>
            </center>
        </div>
    );
}
}

Answer 1

据我了解，您想在DaysForm组件中设置username，然后在单击handleSubmit时，它就会显示出来在 FormDetails 组件中。这是正确的吗？

假设是这样，则缺少一些东西。

首先，您当前没有在 DaysForm 中呈现 FormDetails。所以现在，他们之间没有任何关系。或者至少不在您显示的代码中。您是否使用用户名作为redux状态，也许这在两个组件中共享？因为如果是这样的话，一切都会改变。

更简单的方法是让 FormDetails 成为 DaysForm 的子级，然后将 username 状态作为 prop 传递FormDetails 组件。这将使它看起来像这样:

class DaysForm extends React.Component {
// your code

render(){
return(
      <div>
        <p>      
            How many days are in a full time working week?
        </p>
        <input type="text" className="form-control" onChange={this.updateInput}/>
        <p>      
            How many days a week will this employee work?
        </p>
        <input type="text" className="form-control"/>
        <br></br>
        <center>
            <button className="btn btn-default" onClick={this.onCalculate.bind(this)}>Calculate</button>
        </center>

        <FormDetails username={this.state.username}/>
      </div>

  )
 }
}

但是，您提到这些组件彼此没有关系，我假设没有其他组件可以连接这两个组件，因此当您想要将一种状态从一个组件传递到另一个组件时，这会变得有点复杂。根据帖子的标签，我假设您正在使用 Redux。如果没有，对于这种情况，我鼓励您这样做，因为它将处理组件之间的状态。当然，如果您还没有接触过其中任何一个，我承认这是一个全新的蠕虫 jar 头。

至于state和props的区别。状态通常属于一个组件，您更改它们会导致组件重新渲染，并且它们稍后可能会作为子组件的 props 传入(如示例代码所示)。另一方面， Prop 来自其他组件并且是不可变的。 See more here 。您在 DaysForm 中使用状态的方式似乎很好并且符合预期，这里的主要挑战是弄清楚当存在时如何将该状态传递给 FormDetails它们之间没有明显的其他组件。