ReactJS передает состояние другому классу
У меня проблема с доступом к состоянию на другом компоненте. Я новичок в использовании 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.info 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>
);
}
}
@theJuls они полностью разделены. Я просто хочу передать имя пользователя состояния в FormDetails
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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. Если нет, в этом случае я бы посоветовал вам сделать это, поскольку он будет обрабатывать ваше состояние между компонентами. Конечно, если вы еще ничего не трогали, я признаю, что это совершенно новая банка червей, которую нужно открыть.
Что касается разницы между состоянием и реквизитом. Состояние обычно принадлежит компоненту, вы меняете их, вызывая повторную визуализацию компонента, и позже они могут быть переданы в качестве реквизита для дочернего компонента (как показано в примере кода). С другой стороны, свойства исходят из других компонентов и неизменны. Подробнее здесь. То, как вы используете состояние в DaysForm, кажется нормальным и ожидаемым, основная проблема здесь - выяснить, как передать это состояние в FormDetails, когда между ними нет очевидных других компонентов.
Из того, что я здесь вижу, эти два компонента не связаны друг с другом. Было ли ваше намерение в какой-то момент рендерить
FormDetailsвDaysForm, или они полностью разделены?