如何使用 redux-form 在不同的组件（一个组件向上）中显示来自 FieldArray 的字段

Question

我使用 redux-form 中的 <FieldArray>（稍旧的版本，react 16.3.0 和 redux-form 7.2.1），如果我像在文档中那样使用它，它就可以工作。但是我希望按钮显示在一个组件中，而字段显示在不同的组件中：

<App>
    <Cmp1/>
    <Cmp2/>
    // this is where I want the fields
</App>

按钮应在 <Cmp1/> 中，而实际字段应显示在 <App/> 中。

<App/>:

class App extends React.Component{
  constructor(props){
    this.state = {
      fields: []
    }
  } 
 
  onFieldArrayChange(field){
    const {fields} = this.state;
    const newFields = fields.push(field);
    this.setState({...this.state, fields: newFields});
  }

  render(){
     return (
       <div>
           My App 
           <div>{this.state.fields}</div>
           <Cmp1 onFieldArrayChange={this.onFieldArrayChange.bind(this)}
      </div>
     )

  }
}

我尝试了以下方法，<Cmp1/>：

class Cmp1 extends React.Component{
  renderMyFieldArray({ fields, meta: { error, submitFailed } }){
    return(
      <button type="button" onClick={() => this.props.onFieldArrayChange(<MyField
                      key={fields.length}
                      name={`myName[${fields.length}]`}
                      index={fields.length})
       >Add Field</button>
    ) 
  }
  
  render(){
    return(
      <FieldArray name="myName" component={this.renderMyFieldArray.bind(this} /> 
    )
  }
}

这是可行的，但是，输入真的很慢。当我尝试输入一个字符串时，它会在每个字母后被截断，我必须再次单击该字段。

我也试过像这样传递字段<Cmp1/>:

<button type="button" onClick={() => this.props.onFieldArrayChange(fields)}>
     Add Filter
</button>

然后在 <App/> 中，我将状态设置为字段：

onFieldArrayChange(field){
  const {fields} = this.state;
  const newFields = fields.push({});
  this.setState({...this.state, fields: newFields});
}

然后在渲染函数中，我像这样映射字段：

{this.state.fields.map((name, index)=>{
    return (
        <MyField
           key={index}
           name={name}
           index={index}
        />
    );
})}

在这种情况下，第一个字段不会显示。我必须单击两次才能显示 1 个字段。

如何实现？

Answer 1

我真的找不到解决办法，但我用不同的方法解决了。

我把<FieldArray name="myName" component={this.myRenderFunc.bind(this)} />放到了<App/> 使用 myRenderFunc:

myRenderFunc({ fields, meta: { error, submitFailed } }) {
        const handleClick = () => {
            fields.push({});
            this.setState({...this.state, fields});
        }

        return (
            <button type="button" onClick={handleClick.bind(this)}>
                Add Filter
            </button>
        );
    }

我将字段保存在状态中，然后将它们传递到我的组件中：

<Comp1 fields={this.state.fields}/>.

如何使用 redux-form 在不同的组件（一个组件向上）中显示来自 FieldArray 的字段

How to display fields from FieldArray in a different component (one component up) with redux-form

javascript

reactjs

react-redux

redux-form