Question

下面是我到目前为止的代码，我的状态没有按预期工作，有点复杂的对象，我能够使用一个简单的对象，在我的状态中没有嵌套对象，并且它按预期工作

如果我不在客户对象中使用personalInfo或contactInfo并使用所有属性并创建简单的客户对象

，则

状态分配正常工作

    import React, {PropTypes} from 'react';
    import {Grid,Row,Col,Button,Label} from 'react-bootstrap';
    import {connect} from 'react-redux';
    import * as customerActions from '../../actions/customerActions';
    import {bindActionCreators} from 'redux';

    class AddCustomer extends React.Component{
      constructor(props , context){
        super(props , context);

    this.state={
      customer:{
        personalInfo:{
          firstName:"",
          lastName:"",
          dob:"",
          ssn:""

        },
        contactInfo:{
          address:"",
          addressLine2:"",
          city:"",
          state:"",
          zip:"",
          phoneNumber:"",
          emailAddress:""
        }
      }
    };
    this.handleChange = this.handleChange.bind(this);
    this.onClickCancel = this.onClickCancel.bind(this);
    this.onClickSave = this.onClickSave.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
      customer: {
        personalInfo:{

        },
        contactInfo:{

        },
        ...this.state.customer,
        [name]: value
      }
    });
    console.log(this.state.customer);
  }

  onClickCancel(){

  }

  onClickSave(){
    this.props.actions.createCustomer(this.state.customer);
  }

  render() {
    return (
      <div className="container-fluid">
        <Grid>
          <Row className="show-grid">
            <Col xs={10} md={10}><b>ADD A LEAD</b></Col>
            <Col xs={2}  md={2}>
              <Button>&times;</Button>
            </Col>
          </Row>
          <Row className="show-grid">
            <Col xs={12} md={12}>
              <hr/>
            </Col>
          </Row>
          <p><b>Personal Information</b></p>
          <br/>
          <Row className="show-grid">
            <Col xs={6} md={6}>
              <Row><Label>First Name*</Label></Row>
              <Row><input name="personalInfo.firstName" type="text" value={this.state.customer.personalInfo.firstName} onChange={this.handleChange} required="true"/></Row>
            </Col>
            <Col xs={6} md={6}>
              <Row><Label>Last Name*</Label></Row>
              <Row><input name="personalInfo.lastName" type="text"  value={this.state.customer.personalInfo.lastName} onChange={this.handleChange} required="true"/></Row>
            </Col>
          </Row>
          <br/>
          <Row className="show-grid">
            <Col xs={2} md={2}>
              <Row><Label>Date of Birth*</Label></Row>
              <Row><input name="personalInfo.dob" type="text" value={this.state.customer.personalInfo.dob} onChange={this.handleChange} required="true"/></Row>
            </Col>
            <Col xs={2} md={2}>
              <Row><Label>SSN*</Label></Row>
              <Row><input name="personalInfo.ssn" type="text"  value={this.state.customer.personalInfo.ssn} onChange={this.handleChange} required="true"/></Row>
            </Col>

          </Row>
          <br/>
          <p><b>Contact Information</b></p>
          <br/>
          <Row className="show-grid">
            <Col xs={6} md={6}>
              <Row><Label>Address</Label></Row>
              <Row><input name="contactInfo.address" type="text"  value={this.state.customer.contactInfo.address} onChange={this.handleChange}/></Row>
            </Col>
            <Col xs={6} md={6}>
              <Row><Label>Address Line 2</Label></Row>
              <Row><input name="contactInfo.addressLine2" type="text" value={this.state.customer.contactInfo.addressLine2} onChange={this.handleChange}/></Row>
            </Col>
          </Row>
          <br/>

          <Row className="show-grid">
            <Col xs={2} md={2}>
              <Row><Label>City</Label></Row>
              <Row><input name="contactInfo.city" type="text" value={this.state.customer.contactInfo.city} onChange={this.handleChange}/></Row>
            </Col>
            <Col xs={2} md={2}>
              <Row><Label>State</Label></Row>
              <Row><input name="contactInfo.state" type="text" value={this.state.customer.contactInfo.state}  onChange={this.handleChange}/></Row>
            </Col>
            <Col xs={2} md={2}>
              <Row><Label>Zip</Label></Row>
              <Row><input name="contactInfo.zip" type="text"  value={this.state.customer.contactInfo.zip} onChange={this.handleChange}/></Row>
            </Col>
          </Row>
          <br/>
          <Row className="show-grid">
            <Col xs={4} md={4}>
              <Row><Label>Phone Number</Label></Row>
              <Row><input name="contactInfo.phoneNumber" type="text" value={this.state.customer.contactInfo.phoneNumber}  onChange={this.handleChange}/></Row>
            </Col>
            <Col xs={4} md={4}>
              <Row><Label>Email Address</Label></Row>
              <Row><input name="contactInfo.emailAddress" type="text" value={this.state.customer.contactInfo.emailAddress} onChange={this.handleChange}/></Row>
            </Col>
          </Row>
          <br/>
          <Row className="show-grid">
              <hr/>
          </Row>
          <Row className="show-grid">
            <input className="pull-right" type="submit" onClick={this.onClickCancel} value="Cancel"/>
            <input className="pull-right" type="submit" bsStyle="primary" onClick={this.onClickSave} value="Add"/>
          </Row>
        </Grid>
      </div>
    );
  }
}
AddCustomer.propTypes={
  actions:PropTypes.object.isRequired,
  customer:PropTypes.array.isRequired

};

function mapStateToProps(state, ownProps) {
  return{
    customer:state.customer
  };
}

function mapDispatchToProps(dispatch) {
  return{
    actions: bindActionCreators(customerActions,dispatch)
  };
}

export default connect(mapStateToProps,mapDispatchToProps)(AddCustomer);

Answer 1

我不确定您收到的未检测到的结果是什么，但我猜你可能会尝试这样的事情：

handleChange(type, name, event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  this.setState({
    customer: {
      ...this.state.customer,
      [type]:{
        ...this.state.customer[type],
        [name]: value
      }
    }
  });
  console.log(this.state.customer);
}

...

render() {
  ...

    <Row><input type="text" value={this.state.customer.personalInfo.firstName} onChange={this.handleChange.bind(this, 'personalInfo', 'firstName')} required="true"/></Row>

  ...

    <Row><input type="text" value={this.state.customer.contactInfo.address} onChange={this.handleChange.bind(this, 'contactInfo', 'address')}/></Row>

  ...
}

如何在react js中管理具有复杂json对象的状态

1 个答案: