Добавление двух входных значений в одно состояние Reactjs
Я хочу добавить поле trip_start и trip_end в одном состоянии под названием name, чтобы при отправке данных они объединялись в одно поле name.
Вот что происходит, когда я отправляю данные, когда я щелкаю в первый раз, когда состояние для name показывает null, когда я нажимаю второй раз, когда состояние name заполняется данными trip_start и trip_end.
Ниже мой код:
export class DriverPage extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
trip_start:'',
trip_end:'',
nameError:'',
details:'',
detailsError:'',
price: '',
priceError:'',
driver_name: localStorage.getItem('username')
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChangeEvent = this.handleChangeEvent.bind(this);
}
handleSubmit = (event) => {
event.preventDefault();
console.info('state ', this.state.name)
this.setState({name:''+this.state.trip_start+' to ' + this.state.trip_end});
};
handleChangeEvent =(evt) => {
this.setState({ [evt.target.name]: evt.target.value });
}
Ниже мой компонент, содержащий HTML-код:
export const DriverComponent = ({handleSubmit, handleChangeEvent,obj})=>(
<div className = {'bg-image'}>
<Card className = {'landing-card'}>
<form onSubmit = {handleSubmit}>
<Row>
<Col s = {12} m = {12} l = {12}>
<label s = {12} l = {12} className = {'header'}> Make Ride Request </label>
</Col>
<Input s = {12} l = {12} type = {'text'} value = {obj.trip_start} label = "Trip Start" name='trip_start' onChange = {handleChangeEvent}/>
<Input s = {12} l = {12} type = {'text'} value = {obj.trip_end} label = "Trip End" name='trip_end' onChange = {handleChangeEvent}/>
<Col s = {12} m = {12} l = {6}>
<div className = {'errors'} s = {10}>{obj.nameError}</div>
</Col>
<div className = "input-field col s12">
<textarea id = "details" name='details' onChange = {handleChangeEvent} className = "materialize-textarea"></textarea>
<label htmlFor = "details">Trip Details</label>
</div>
<Col s = {12} m = {12} l = {6}>
<div className = {'errors'}>{obj.detailsError}</div>
</Col>
<Input s = {12} l = {12} type = "text" value = {obj.price} label = "Price" name='price' onChange = {handleChangeEvent} />
<Col s = {12} m = {12} l = {6}>
<div className = {'errors'}>{obj.priceError}</div>
</Col>
<Col s = {12} m = {12} l = {12}>
<Button waves='light' className = {`purple button-align`} value='submit' type='submit' >Create Ride Request</Button>
</Col>
</Row>
</form>
</Card>
</div>
);
Таким образом, я хочу, чтобы состояния trip_start и trip_end были объединены в состояние name мгновенно, пока я собираюсь отправлять данные.
Например, это простой псевдокод того, чего я хочу достичь:
trip_start = new york
trip_end = toronto
name = trip_start + "to " +trip_end
Output
name = new york to toronto
Я думаю, вам лучше держать два значения отдельно, это поможет вам легче управлять формой
@Kort, я редактировал эту строку.
@HafeezHamza, дайте мне подсказку.
Непонятно, о чем вы спрашиваете. У вас есть два значения состояния, которые нужно отслеживать; если вы хотите, чтобы name отслеживал эти изменения, при обновлении любого из входных данных вам следует обновить состояние name.
двойное нажатие кнопки отправки - ваша единственная проблема, затем замените handleSubmitsetState на следующий this.setState({name:''+this.state.trip_start+' to ' + this.state.trip_end}, () => console.info(this.state.name));
@DaveNewton, я включил псевдокод внизу сообщения, я думаю, это могло бы дать больше толкования.
@IdrisStack, пожалуйста, добавьте код для handleChangeEvent()
@Kort, я поделился этим.
Ответы 1
Есть ли причина, по которой это должно быть конкатенированное представление до? Похоже, вы усложняете себе жизнь, комбинируя две струны асинхронныйсинхронно. Вместо этого просто упростите себе жизнь и объедините отправку формы на.
Объединенный пример отправки формы (лучшее решение): https://codesandbox.io/s/10w18m5z54
контейнеры / Form.js
import React, { Component } from "react";
import Fields from "../components/Fields";
export default class Form extends Component {
state = {
tripStart: "",
tripEnd: ""
};
handleChangeEvent = ({ target: { value, name } }) =>
this.setState({
[name]: value
});
handleSubmit = e => {
e.preventDefault();
const { tripEnd, tripStart } = this.state;
const name = `${tripStart} to ${tripEnd}`;
alert(name);
};
render = () => (
<Fields
{...this.state}
handleSubmit = {this.handleSubmit}
onHandleChange = {this.handleChangeEvent}
/>
);
}
Пример конкатенирован на примере изменения ввода (работает, но нет - идеальное решение, поскольку вызывает двойную повторную визуализацию - также, this.state.name никогда не используется в вашем компоненте, поэтому использование state - это ненужный и не рекомендуется!): https://codesandbox.io/s/nk66v4rk9j
контейнеры / Form.js
import React, { Component } from "react";
import Fields from "../components/Fields";
export default class Form extends Component {
state = {
tripStart: "",
tripEnd: ""
};
handleChangeEvent = ({ target: { value, name } }) =>
this.setState(
{
[name]: value
},
() =>
this.setState({
name: `${this.state.tripStart} to ${this.state.tripEnd}`
})
);
handleSubmit = e => {
e.preventDefault();
const { name } = this.state;
alert(name);
};
render = () => (
<Fields
{...this.state}
handleSubmit = {this.handleSubmit}
onHandleChange = {this.handleChangeEvent}
/>
);
}
Что вы имеете в виду под «самим набором данных после двойного щелчка». Вы имеете в виду отправку формы? Где вы хотите объединить эти поля?