Question

所以我对React和JavaScript都很陌生，而且我正在开发一个需要向导形式的项目。然后我开始使用redux-form，以使工作更轻松。但我正在努力根据选择列表创建动态输入字段。

预期的功能是当在下拉列表中选择3时，我将获得3个输入字段。我现在能够这样做，但只能使用按钮进行更新。我不知道如何在不使用按钮的情况下完成此操作。

我正在使用formValueSelector，因为我还需要在向导表单的另一部分中执行此操作。

我想我能做到这一点，如果我的Page组件是一个有状态的类，但我不知道我是否可以与redux-form一起完成。有什么提示吗？

let renderParts = ({fields, n}) => {
    function update(n) {
        n = Number(n);
        let arr = Array(n).fill(0);
        fields.removeAll();
        arr.map(index =>
        fields.push({})
        )
    }

    return (
    <div>
        <button type="button" onClick={() => update(n) }>Update</button>
        <ul className="list-inline">
            {fields.map((parts, index) =>
                <li key={index}>
                    <Field name={`${parts}.partLength`} type="number" component={renderField}/>
                </li>
            )}
        </ul>
    </div>
    )
};

let Page = (props) => {
    const { handleSubmit, numFields } = props;
  return (
    <form className="form-horizontal" onSubmit={handleSubmit}>
          <Field name="numFields" component="select" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
          </Field>
        <FieldArray name="parts" component={renderParts} n={numFields}/>
    </form>
  );
};

Page = reduxForm({
    form: 'wizard',
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true
})(Page);

const selector = formValueSelector('wizard')
Page = connect(
    state => {
        const numFields = selector(state, 'numFields');
        return {
            numFields
        }

    }
)(Page)

export default Page;

redux-form中的动态输入字段。如何重新奉献

0 个答案: