Question

考虑到示例http://redux-form.com/6.0.5/examples/fieldArrays/中的事实。所有renderField ..函数都在React类之外。因此，我想如何使用反应状态或道具来确定我是否要隐藏或显示一个字段？

我要做的是设置一个按钮来操纵状态以显示＆＃39;阻止＆＃39;或者没有＆＃39;没有＆＃39;对于一个领域。有人可以指导我吗？我试图将renderField变量放在React类的渲染中，但这会导致错误。

Answer 1

Field道具可以访问传递给component的所有道具。

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



const TextField = props => {

    if(props.displayBlock) {
        ...
    }

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

Answer 2

感谢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'}}
 />

但是，即使我能够控制Field的显示，也不会重新渲染字段数组。

因此，我必须添加两个函数

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

取自http://redux-form.com/6.0.5/docs/api/FieldArray.md/，每当我隐藏或显示该字段时实际重新渲染该字段。希望有更优雅的方法来实现这一点，因为fieldarray闪烁。

如何在FieldArray中为Redux Form v6隐藏/显示Field

2 个答案: