Question

我有一些看起来像这样的代码：

      const companies = [
          {
              id: 1, 
              name: "Acme"
          }, 
          {
              id: 2, 
              name: "Beta"
          }
      ]; 

      ....
      <RadioGroup
        aria-label={title}
        name={title}
        value={this.state.value}
        onChange={this.handleChange}
      >
        {companies.map(v => (
          <FormControlLabel
            value={v.name}
            control={<Radio />}
            label={v.name}
            key={v.name}
          />
        ))}
        />
      </RadioGroup>

棘手的一点是，我必须将字符串类型绑定到单选按钮，以实现公司名称的所有意图和目的。

但是，稍后提交表单时，我需要整个公司对象。

我可以做类似的事情：

company = companies.filter(v => v.name === this.state.value);

但是有点混乱。

有没有一种更简单的方法来实现此目的，而我正在丢失？

Answer 1

由于您已经需要公司对象，因此在提取时，我将拥有公司所需的一切：

const companies = [
  {
    id: 1, 
    name: "Acme",
    ...otherProps
  }, 
  {
    id: 2, 
    name: "Beta",
    ...otherProps
  }
];

然后，在map数组上company，并将其沿属性传递到一个小的子组件，该子组件随后可以将其传递回FormItemControl的{{1 }} 方法。然后，父级将所选内容存储到onChange：

Form.js

state

RadioOption.js

...
state = { company: [] };    

handleSubmit = e => {
 e.preventDefault();

 const { company } = this.state;

 ...etc
}

handleCompanySelect = company => this.setState({ selectedCompany: [company] })

render = () => {
 ...
 return (
   <form onSubmit={this.handleSubmit}>
    ...
     <RadioGroup
       aria-label={title}
       name={title}
       value={this.state.value}
       onChange={this.handleChange}
      >
        {companies.map(props => ( 
          <RadioOption
            company={...props}
            key={props.id}
            handleCompanySelect={this.handleCompanySelect}
          />
        ))}
     </RadioGroup>
   ...
 </form>
)

如何有效地将json数据绑定到React中的单选按钮？

1 个答案: