Javascript 将状态传递给另一个类

我无法访问其他组件的状态。我是使用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>
    );
}
}

//组件
类DaysForm扩展了React.Component{
构造函数（）{
超级（）；
此.state={
用户名：“
};
this.updateInput=this.updateInput.bind（this）；
}
再次计算（e）{
$（“#myModal”）.modal（）；
}
更新输入（事件）{
this.setState（{username:event.target.value}）；
}
render（）{
返回(
一个全职工作周有多少天

该员工每周工作几天



算计
);
}
}
类FormDetails扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（事件）{
//这里的console.log是从组件提交的状态
}
render（）{
返回(
电邮地址：

企业名称：

电话号码：



提交
);
}
}

据我所知，您希望在

DaysForm

组件中设置

用户名

，然后单击

handleSubmit

时，它将显示在

FormDetails

组件中。对吗

假设是这样的话，就少了一些东西

首先，您当前没有在

DaysForm

中呈现

FormDetails

。所以现在，他们彼此没有关系。或者至少不在您显示的代码中。您是否将

用户名

用作两个组件中共享的redux状态？因为如果是这样的话，一切都会改变

更简单的方法是让

FormDetails

成为

DaysForm

的子级，然后在

FormDetails

组件中将

username

状态作为道具传递。这将使它看起来像这样：

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>

  )
 }
}

class DaysForm扩展了React.Component{
//你的代码
render（）{
返回(

一个全职工作周有多少天？


该员工每周工作几天？




算计
)
}
}

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

---

至于状态和道具的区别。状态通常属于一个组件，您更改它们会导致组件重新渲染，并且它们可能稍后作为子组件的道具传入（如示例代码所示）。另一方面，道具来自其他组件，是不可变的。您在

DaysForm

中使用状态的方式似乎很好，正如预期的那样，这里的主要挑战是，当它们之间没有明显的其他组件时，如何将该状态传递给

FormDetails

。

从我在这里看到的，这两个组件彼此没有关系。您是打算在某个时刻以表单形式呈现

表单详细信息

，还是它们完全分开了？@theJuls它们完全分开了。我只想将状态用户名传递给FormDetails