ReactJS 将状态传递给另一个 class

Question

我在访问其他组件的状态时遇到问题。我是使用 reactjs 的初学者。我仍然对如何使用状态和道具感到困惑。我得到的输入将被设置为用户名状态，然后我将把它传递给 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。所以现在，他们彼此没有任何关系。或者至少不在您显示的代码中。您是否正在使用 username 作为 redux 状态，也许这在两个组件中是共享的？因为如果是这样的话，这会改变一切。

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

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>

  )
 }
}

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

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

ReactJS 将状态传递给另一个 class

ReactJS passing state to another class

javascript

reactjs

react-redux

state

react-props