代码之家 › 专栏 › 技术社区 › dwjohnston

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

material-ui reactjs

dwjohnston · 技术社区 · 7 年前

我有一段代码是这样的:

      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>

但是,稍后当我提交表单时,我需要整个companies对象。

我可以这样做:

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

但是有点乱。

1 回复 | 直到 7 年前

Matt Carlotta 7 年前

既然你已经需要公司对象了,我会把你需要的关于公司的一切都放在fetch上:

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

那么, map 超过 company FormItemControl 的 onChange 方法。然后父对象将选择存储到 state :

表单.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>
)

收音机选项.js

import React, { PureComponent } from 'react';
import { Radio, FormControlLabel } from '...';

export default class RadioOption extends PureComponent {

  handleChange = () => this.props.handleCompanySelect(this.props.company); 

  render = () => {
     const { name } = this.props.company;

     return (
       <FormControlLabel
         control={<Radio />}
         name={name}
         value={name}
         label={name}
         onChange={this.handleChange}
       />
     )
  } 
}

推荐文章