Question

我想在称为trip_start的一种状态下添加trip_end和name字段，以便在发送数据时将其合并为一个字段name。 / p>

当我提交数据，第一次单击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

containers / 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从未在组件中使用，因此请使用{{1} }是不必要的，并且不推荐！）：https://codesandbox.io/s/nk66v4rk9j

containers / Form.js

state

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

1 个答案: