我如何命名我的react组件以容纳嵌套JSON中的元素？

Question

bounty到期在7天内。该问题的答案有资格获得+ 200声望赏金。Dave正在寻找来自信誉良好的来源的答案。

我正在使用React 16.13.0，我具有以下组件（src / containers / FormContainer.jsx）...

class FormContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      defaultCountry: 484,
      countries: [],
      provinces: [],
      newCoop: {
        name: '',
        type: '',
        ...
      },


    ...
  render() {
    return (
        <form className="container-fluid" onSubmit={this.handleFormSubmit}>

            <Input inputType={'text'}
                   title= {'Name'}
                   name= {'name'}
                   value={this.state.newCoop.name}
                   placeholder = {'Enter cooperative name'}
                   handleChange = {this.handleInput}

                   /> {/* Name of the cooperative */}

            <Input inputType={'text'}
                   title= {'Type'}
                   name= {'type'}
                   value={this.state.newCoop.type}
                   placeholder = {'Enter cooperative type'}
                   handleChange = {this.handleInput}

                   /> {/* Type of the cooperative */}

我的输入语句，src / components / Input.jsx，看起来像这样...

import React from 'react';

const Input = (props) => {
    return (
  <div className="form-group">
    <label htmlFor={props.name} className="form-label">{props.title}</label>
    <input
      className="form-input"
      id={props.name}
      name={props.name}
      type={props.type}
      value={props.value}
      onChange={props.handleChange}
      placeholder={props.placeholder}
    />
  </div>
)
}

export default Input;

问题是我需要提交POST请求，其中“ type”参数将作为以下JSON提交...

{
    "name": "1872",
    "type": {
        "name": "Coworking Space"
    },
    ...
}

我如何命名第二个输入字段（“类型”字段），以便可以使用适当的结构提交JSON？

Answer 1

有更多方法可以实现这一目标，但我看到可以实现2个]

1。将newCoop保留在POST呼叫所需的结构中

this.state = {
  newCoop: {
    name: '',
    type: {
      name: ''
    }
  }
}

更改您提供给类型输入的值

<Input inputType={'text'}
  title= {'Type'}
  name= {'type'}
  value={this.state.newCoop.type.name}
  placeholder = {'Enter cooperative type'}
  handleChange = {this.handleInput}
/>
并调整this.handleInput以处理这种情况：

• 您可能需要编写专用的handleTypeNameChange函数
• 以可以处理这种情况的方式更改this.handleInput

这取决于您的this.handleInput功能-您可以共享吗？

您提供给输入的name是html name属性。不确定是否在handleInput中使用它。

2。保留表单，因为它是this.handleFormSubmit中数据形状更改的句柄

this.handleFormSubmit = () => {
  const postData = { 
    name: this.state.newCoop.name, 
    type: {
      name: this.state.newCoop.type
    }
  }
  // POST postData
}

同样，这取决于您的handleFormSubmit代码。

希望有帮助！

Answer 2

• 您必须在this.handleFormSubmit方法中形成对象，这很容易，您只需根据需要形成json对象。