如何填充選擇選項並篩選Redux表單中的FieldArray中的第二個選擇？

Question

第一次選擇時，應該過濾第二次，或通過向Api請求流行。

我遇到的問題是，當進入第二個字段時，狀態被共享給選項，並且當修改任何字段時，修改所有選項。

class FieldCentroCusto extends Component { 
    constructor(){ 
    super() 
    this.state = { 
     itensObra: [] 
    } 
    this.toggleItens = this.toggleItens.bind(this) 
    } 
    toggleItens(event) { 
    this.props.optionsObras.map(obra => { 
     if (event.target.value === obra.nome) { 
      return this.setState({ 
       itensObra: obra.itens 
      }) 
     } 
     return false 
    }) 
    } 

    render() { 
    const renderItens = ({ fields, optionsObras }) => (
     <div> 
     <Button color="primary" type="button" onClick={() => fields.push({})}> 
      <i className="fa fa-plus"></i> Adicionar Item de Custo 
     </Button> 
     <br /><br /> 
     <table className="table table-bordered table-hover"> 
      <thead className="thead-inverse"> 
      <tr> 
       <th>Obra</th> 
       <th>Centro de Custo</th> 
      </tr> 
      </thead> 
      <tbody> 
      {fields.map((item, itemIndex) => 
      <tr key={itemIndex}> 
       <td> 
        <Field name={`${item}.obra`} component={LabelAndSelect} 
          onChange={this.toggleItens} options={ 
          optionsObras.map((option, optionIndex) => { 
           return {value: `${option.nome === undefined?'': 
            option.nome}`, label: `${option.nome === undefined?'': 
            option.nome}`} 
           } 
          )} /> 
       </td> 
       <td> 
       <Field name={`${item}.itemObra`} component={LabelAndSelect} 
          options={this.state.itensObra.map((option, optionIndex) => { 
           return {value: `${option.descricao === undefined?'': 
           option.descricao}`, label: `${option.descricao === undefined?'': 
           option.descricao}`} 
           } 
          )} /> 
       </td> 
      </tr> 
      )} 
      </tbody> 
     </table> 
     </div> 
    ) 

    return (
     <FieldArray name="centrosCusto" 
      optionsObras={this.props.optionsObras}  
      component={renderItens} /> 
    ) 
    } 
} 

Answer 1

我把它整理出來。

我在選擇的onChange事件中傳遞FieldArray索引，並且在傳遞索引的狀態下放置了一個數組。所以我可以用數組中的特定索引填充其他選擇選項。

constructor(){ 
    super() 

    this.state = { 
     itensObra: [] 
    } 
    this.toggleItens = this.toggleItens.bind(this) 
} 
toggleItens(event, index) { 
    const itens = this.state.itensObra 
    this.props.optionsObras.map(obra => { 
     if (event.target.value === obra.nome) { 
      itens[index] = obra.itens 
      return this.setState({ 
       itensObra: itens 
      }) 
     } 
     return false 
    }) 
} 

這裏是字段：

<td> 
    <Field name={`${item}.obra`} component={LabelAndSelect} 
     onChange={(event) => this.toggleItens(event, itemIndex)} 
     options={optionsObras.map((option, optionIndex) => { 
     return {value: `${option.nome === undefined?'':option.nome}`, 
       label:`${option.nome === undefined?'':option.nome}`} 
     } 
    )} /> 
</td> 
<td> 
    <Field name={`${item}.itemObra`} component={LabelAndSelect} 
     options={this.state.itensObra[itemIndex]? 
       this.state.itensObra[itemIndex].map((option, optionIndex) => { 
     return {value: `${option.descricao === undefined?'':option.descricao}`, 
       label: `${option.descricao === undefined?'':option.descricao}`} 
     } 
    ):[]} /> 
</td>