React-如何处理嵌套表格及其价值

Question

我必须设置一种具有单个表格中嵌套值的表格基本上我需要将以下格式的数据发送到API

Payload: {"name": "The org name", "detail": "The org detail", "attributes": {"address": {"lines":[], "city":"", "state": "", "country": "India", "zip": ""}, "contacts":[{"name": "abc", "phone": "PH"}, {"name": "x", "phone": "PH"}] }}

我使用react-bootstrap处理表单。

以下是我表格的当前代码

constructor(props) {
    super(props);
    this.state = this.getInitialState();
  }
  getInitialState() {
    const initialState = {
      organizationForm: {
        name: '',
        detail: '',
        type: 'org',
        attributes: {
          contacts: [{
            name: '',
            phone: ''
          }],
          address: {
            lines: [],
            city: '',
            state: '',
            country: '',
            zip: ''
          }
        }
      },
      errors: {}
    };

    return initialState;
  }

handleChange(e) {
    const organizationForm = this.state.organizationForm;
    var key = e.target.name;
    var value = e.target.value;
    organizationForm[key] = value;
    this.setState({
      organizationForm
    });
  }

以下是表格的代码

  <Col className="create-content-wrap" sm={12}>
        <form className="">
          <FormGroup className="custom-form-group required row">
            <ControlLabel className="custom-form-control-label col-sm-3">
              Name
            </ControlLabel>
            <FormControl
              className="custom-form-control col-sm-9"
              type="text"
              name="name"
              value={organizationForm.name}
              onChange={this.handleChange.bind(this)}
            />
          </FormGroup>
          <FormGroup className="custom-form-group required row">
            <ControlLabel className="custom-form-control-label col-sm-3">
              Detail
            </ControlLabel>
            <FormControl
              className="custom-form-control col-sm-9"
              type="text"
              name="detail"
              componentClass="textarea"
              value={organizationForm.detail}
              onChange={this.handleChange.bind(this)}
            />
          </FormGroup>
          <FormGroup className="custom-form-group row">
            <ControlLabel className="custom-form-control-label col-sm-3">
              Address
            </ControlLabel>
            <FormControl
              className="custom-form-control col-sm-9"
              type="text"
              name="lines"
              componentClass="textarea"
              value={organizationForm.lines}
              onChange={this.handleAddressChange.bind(this)}
            />
          </FormGroup>
          <FormGroup className="custom-form-group row">
            <ControlLabel className="custom-form-control-label col-sm-3">
              City
            </ControlLabel>
            <FormControl
                className="custom-form-control col-sm-9"
                type="text"
                name="city"
                value={organizationForm.attributes.address.city}
                onChange={this.handleAddressChange.bind(this)}
            />
          </FormGroup>
          <FormGroup className="custom-form-group row">
            <ControlLabel className="custom-form-control-label col-sm-3">
              State
            </ControlLabel>
            <FormControl
              className="custom-form-control col-sm-9"
              type="text"
              name="state"
              value={organizationForm.attributes.address.state}
              onChange={this.handleAddressChange.bind(this)}
            />
          </FormGroup>
          <FormGroup className="custom-form-group row">
            <ControlLabel className="custom-form-control-label col-sm-3">
              Country
            </ControlLabel>
            <FormControl
              className="custom-form-control col-sm-9"
              type="text"
              name="country"
              value={organizationForm.attributes.address.country}
              onChange={this.handleAddressChange.bind(this)}
            />
          </FormGroup>
          <FormGroup className="custom-form-group row">
            <ControlLabel className="custom-form-control-label col-sm-3">
              Zipcode
            </ControlLabel>
            <FormControl
              className="custom-form-control col-sm-9"
              type="number"
              name="zip"
              value={organizationForm.attributes.address.zip}
              onChange={this.handleAddressChange.bind(this)}
            />
          </FormGroup>
          <FormGroup className="custom-form-group row">
            <ControlLabel className="custom-form-control-label col-sm-3">
              Contacts
            </ControlLabel>
            <FormControl
              className="custom-form-control col-sm-9"
              type="number"
              name="contacts"
              value={organizationForm.attributes.contacts}
              onChange={this.handleChange.bind(this)}
            />
          </FormGroup>
        </form>
      </Col>

我在React JS World中是noobie。如何绑定地址和联系人的嵌套字段？

Answer 1

您可以添加几种方法来处理地址和属性，例如：Way-1

<FormControl
      className="custom-form-control col-sm-9"
      type="text"
      name="city"
      value={organizationForm.attributes.address.city}
      onChange={this.handleAddressChange(this)}
 />

handleAddressChange = (e) => {
    const organizationForm = this.state.organizationForm;
    let address = organizationForm.attributes.address;
    var key = e.target.name;
    var value = e.target.value;
    address[key] = value;
    organizationForm.attributes.address = address;
    this.setState({
      organizationForm
    });
  }

这样，您的表单也可以松散耦合。因此，如果子对象发生任何更改，则不会影响另一个对象。同样，您可以为所有嵌套对象添加地址，属性等。

方式-2

您可以在下面执行相同的操作，但是您需要使用相同的方法来处理要修改的对象。

<FormControl
          className="custom-form-control col-sm-9"
          type="text"
          name="city"
          value={organizationForm.attributes.address.city}
          onChange={event => { this.handleChange(event, this.state.organizationForm.attributes.address  ,'address'); }}
     />

     <FormControl
          className="custom-form-control col-sm-9"
          type="text"
          name="city"
          value={organizationForm.attributes.address.city}
          onChange={event => { this.handleChange(event, this.state.organizationForm.attributes.contacts  ,'contacts'); }}
     />


     <FormControl
          className="custom-form-control col-sm-9"
          type="text"
          name="city"
          value=onChange={event => { this.handleChange(event, this.state.organizationForm ,'organizationForm'); }}
     />


    handleChange = (e , object , type) => {
        const organizationForm = this.state.organizationForm;
        var key = e.target.name;
        var value = e.target.value;
        object[key] = value;
        if(type === 'address'){
            organizationForm.attributes.address = object;
        } else if (type === 'contacts'){
            organizationForm.attributes.contacts = object;
        } 
        this.setState({
          organizationForm : organizationForm
        });
      }

Answer 2

我建议您保持组件状态平坦，表单中的每个字段只有一个键。提交表单后，您可以将其格式化为 API 所需的形状。