В моем приложении ReactJS у меня есть форма отправки с одним полем ввода, которое я хочу сохранить общим:
if (questions[this.state.currentDialog].entry)
return (
<form onSubmit = {this.onFormSubmit}>
<label>{toWrite.label}</label>
{' '}
<input
name = {toWrite.name}
onChange = {this.onInputChange}
/>
{' '}
<input type='submit' value='Send it >'/>
</form>
);
А мой onInputChange
выглядит так:
onInputChange = (evt) => {
if (evt.target.name == 'name') {
this.setState({
surveyState: {
name: evt.target.value,
change: this.state.surveyState.change,
}
});
};
if (evt.target.name == 'change') {
this.setState({
surveyState: {
name: this.state.surveyState.name,
change: evt.target.value,
}
});
};
};
Прямо сейчас surveyState
меняется каждый раз, когда вы что-то пишете, но вы можете пропустить отправку формы с помощью другой общей кнопки, но состояние уже изменено onInputChange
и будет отображаться в следующем представлении состояния, которое запускается Кнопка skip
. Как этого избежать?
🤔 А знаете ли вы, что...
JavaScript - это скриптовый язык программирования, разработанный Netscape Communications Corporation.
Если у вас есть два свойства в вашем surveyState
, вам нужно обновить оба, например value
и change
, в вашем случае, если вы не хотите, а затем отделите их от surveyState
и объявите как отдельное состояние.
Что я сделал, так это использовал оператор распространения ...
, который принесет вам объект как есть, а затем передал новое значение свойства. Здесь будет добавлено новое значение свойства, если оно не существует, иначе обновите то же самое.
Это будет выполнять те же функции, которые вы пытаетесь достичь.
onInputChange = (evt) => {
if (evt.target.name == 'name') {
this.name = evt.target.value
};
if (evt.target.name == 'change') {
this.change = evt.target.value
};
};
Using `this` variable only to avoid re-rendering but onlt if you are using this state value for manupulation.
затем onFormSubmit
const surveyState = {
name = this.name,
change = this.change
}
this.setState({surveyState })
Сохраните его во временном объекте состояния.
onInputChange = (evt) => {
if (evt.target.name === 'name') {
this.setState({
tempState: {
name: evt.target.value,
}
});
};
if (evt.target.name === 'change') {
this.setState({
tempState: {
change: evt.target.value,
}
});
};
};
При отправке сохраните его в реальном, при пропуске вам не нужно ничего делать или просто очистить tempState:
onFormSubmit = (evt) => {
evt.preventDefault();
this.setState(state => ({
surveyState: {
...state.surveyState,
...state.tempState,
}
}));
}