Блог

учитывая факт в примере http://redux-form.com/6.0.5/examples/fieldArrays /. Все поля визуализации.. функции находятся за пределами класса React. Следовательно, как я предполагаю использовать состояние реакции или реквизит, чтобы определить, хочу ли я скрыть или показать поле?

То, что я пытаюсь сделать, это иметь кнопку для управления состоянием, чтобы отобразить «блок» или «нет» для поля. Может кто-нибудь подсказать мне? Я попытался поместить переменную renderField внутри рендеринга класса React, однако это приводит к ошибкам.

Все реквизиты, которые передаются Field , доступны для component реквизитов.

 <Field
  name={foo}
  type="text"
  component={TextField}
  displayBlock={displayBlock}
/>



const TextField = props => {

    if(props.displayBlock) {
        ...
    }

    return (
        <div>
            <input {...props.input} />
        </div>
    );
};
  

Спасибо Runaground, который предложил мне ответ. Я понял, что могу передавать состояние в качестве реквизита в FieldArray, например

 <FieldArray name="histories" component={renderHistories}  openClose={this.state.openClose}/>  

Это позволяет мне использовать массив состояний из this.state.openClose, чтобы контролировать, какое поле я хотел бы скрыть или показать.

 <Field
  name={`${histories}.details`}
  type="text"
  component={renderField}
  style={{display: openClose[index] ? 'block' : 'none'}}
 />  

Однако, несмотря на то, что я могу управлять отображением поля, массив полей не отображается повторно.

Следовательно, я должен добавить две функции

 fields.push({});
setTimeout(()=>{
 fields.pop();
}, 1);  

это взято из http://redux-form.com/6.0.5/docs/api/FieldArray.md /, чтобы фактически повторно отображать fieldarray всякий раз, когда я скрываю или показываю поле. Надеюсь, есть более элегантный способ сделать это, поскольку fieldarray мерцает.