0
最初の選択は、選択すると、2番目の、または人気のあるものをApiへの要求でフィルタリングする必要があります。オプションを選択し、ReduxフォームでFieldArrayの2番目の選択をフィルタリングする方法は?
私が抱えている問題は、2番目のフィールドを入力すると状態がオプションに共有され、フィールドを変更するときにすべてのオプションが変更されるということです。
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} />
)
}
}