reactjs - 在一个状态下添加两个输入值 Reactjs

Question

我想在一个名为trip_startand的状态下添加一个字段，这样当我发送数据时，它就会合并到一个字段中。trip_endnamename

这就是我提交数据时发生的情况，当我第一次单击状态时name显示为 null，当我第二次单击时，状态中name填充了trip_startand的数据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

标签： reactjs

Answer 1

有什么理由在提交之前必须连接它吗？似乎通过synchronously组合两个异步字符串使您的生活变得更加艰难。相反，只需让您的生活更轻松，并在提交表单时连接起来。

连接表单提交示例（最佳解决方案）：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}
    />
  );
}