Как эффективно связать данные JSON с переключателем в React? - PullRequest
Новая
       6

Как эффективно связать данные JSON с переключателем в React?

0 голосов
/ 05 октября 2018

У меня есть немного кода, который выглядит следующим образом: 

      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);

но это немного грязно.

Есть ли более простой способ сделать это, что мне не хватает?

1 Ответ

0 голосов
/ 05 октября 2018

Поскольку вам уже нужен объект компании, у меня будет все, что вам нужно о компании при получении: 

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

затем map над массивом company и передачаон передает свои свойства небольшому дочернему компоненту, который затем может передать его родителю по методу FormItemControl onChange.Затем родительский объект сохраняет выбор в state:

Form.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>
)

RadioOption.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}
       />
     )
  } 
}
...