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

以下是Fields：

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

如何填充选择选项并在Redux表单中过滤FieldArray中的第二个选择？

1 个答案: