Redux Form FieldArray прохождение проблемы состояния - PullRequest
Новая
       37

Redux Form FieldArray прохождение проблемы состояния

0 голосов
/ 23 января 2020

Я использую массив полей избыточной формы для многократного ввода данных, которые состоят из типа данных (селектор), ключа (текст), значения (текст). Итак, я должен активировать селектор, чтобы показать / скрыть поле на основе значения, передавая состояние избыточности. но у меня проблема с передачей состояния массива. вот мой код Я пытался передать fields.map, но это не сработало. Любое предложение? 

{/* <li class="list-group-item">
  {(touched || submitFailed) && error && <span>{error}</span>}
</li> */}
{fields.map((member, index) => ( <<<<<<<<<<<<<<<<<<<<<<<< how can i pass this to state?
  <li class="list-group-item" key={index}>
    {/* <h4>Member #{index + 1}</h4> */} 
    <div class="form-row">
        <Field
        name={`${member}.tipeData`} <<<< how can i pass this ${member} to state?
        component={renderDropdown}
        // data={colors}
        valueField="value"
        textField="color"/>
        {member}

        <Field
        name={`${member}.key`}
        label="Key"
        type="text"
        component={renderField}
        />

        {tipeDataValue === 'String' && <>
        <Field
        name={`${member}.value`}
        type="text"
        label="Value"
        placeholder="bundle"
        component={renderField}
        /></>}

        {tipeDataValue === 'Integer' && <>
        <Field
        name={`${member}.value`}
        type="number"
        label="Value"
        placeholder="bundle"
        component={renderField}
        /></>}

        {tipeDataValue === 'Boolean' && <>
        <Field
        name="tipeData"
        component={renderBoolean}
        data={colors}
        valueField="value"
        textField="color"/>
        </>}


        <div class="col">
            <button
            class="form-control btn btn-danger"
            type="button"
            title="Remove Member"
            onClick={() => fields.remove(index)}
            >X</button>
        </div>
    </div>
  </li>
))}


FieldArraysForm = reduxForm({
  form: "fieldArrays",
//   validate
})(FieldArraysForm);

const selector = formValueSelector('fieldArrays') // <-- same as form name
FieldArraysForm = connect(
  state => {
    // can select values individually
    // const member = selector(state, fields)
    const tipeDataValue = selector(state, 'tipeData')
    // or together as a group
    return {
      tipeDataValue,
    }
  } 
)(FieldArraysForm)

export default FieldArraysForm

1 Ответ

0 голосов
/ 24 января 2020

Возможно, попробуйте объединить вашу reduxForm и соединить вызовы.

Мой проект использует этот стиль: 

const formname = 'fieldArrays'
const selector = formValueSelector(formname)

class FieldArraysForm extends Component {


 render() {
  const {tipeData } = this.props
   ...
   return(
     ...
    )
  }
 }

export default compose(
connect(state => ({
tipeDataValue: selector(state,'tipeData')
})),
reduxForm({
form: formname,
}),
)(FieldArraysForm)
...