在一个状态Reactjs中添加两个输入值

Question

我想在一个名为name的状态中添加一个由trip_start和trip_end组成的字段，这样当我发送数据时，它就会合并为一个字段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.handleChange = this.handleChange.bind(this);
}
handleSubmit = (event) => {
event.preventDefault();
console.log('state ', this.state.name)
this.setState({name:''+this.state.trip_start+' to ' + this.state.trip_end});
};
handleChange =(evt) => {
this.setState({ [evt.target.name]: evt.target.value });
}

下面是我的组件，它包含HTML代码：

export const DriverComponent = ({handleSubmit, handleChange,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={handleChange}/>
<Input s={12} l={12} type={'text'} value={obj.trip_end} label="Trip End" name='trip_end'  onChange={handleChange}/>
<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={handleChange} 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={handleChange} />
<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

Answer 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: ""
};
handleChange = ({ 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.handleChange}
/>
);
}

连接输入更改示例(有效，但不是理想的解决方案，因为它会导致重复重新绘制——此外，组件中从未使用过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: ""
};
handleChange = ({ 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.handleChange}
/>
);
}