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

根据我的理解，您希望在username组件中设置DaysForm，然后在点击handleSubmit时，它会显示在FormDetails组件中。这是对的吗？

假设有一些事情遗失。

首先，您目前尚未在FormDetails中呈现DaysForm。所以现在，他们彼此没有关系。或者至少不在您显示的代码中。您是使用username作为还原状态，也许是两个组件中的共享？因为这样做会改变一切。

更简单的方法是让FormDetails成为DaysForm的孩子，然后将username状态作为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。如果没有，对于这种情况，我会鼓励你这样做，因为它将在组件之间处理你的状态。当然，如果你还没有触及任何一个，我会承认这是一个全新的蠕虫可以打开。

至于状态与道具的区别。状态通常属于某个组件，您更改它们会导致组件重新呈现，以后它们可能会作为子组件的道具传递（如示例代码所示）。另一方面，道具来自其他组件并且是不可变的。 See more here。您在DaysForm中使用状态的方式似乎很好，并且正如预期的那样，这里的主要挑战是如何在其间没有明显的其他组件时将该状态传递给FormDetails它们。

ReactJS将状态传递给另一个类

1 个答案: