如何使用 redux-form 进行受控输入？

Question

我有一个表单组件，其中我们有一个输入 field.once 用户在输入字段中输入一个数字并按提交，它应该变成该输入值的两倍。

import {Field} 'redux-form'; 
class Multiply extends React.Component {

  onInputChange = (stateKey) => (e) => {
    this.setState({ [stateKey]: e.currentTarget.value.trim() });
  };

  onSubmit = () => {
    this.setState({ volume: this.state.volume *2  });
  };

  render(): JSX.Element {
    return (
      <div>
        <div>
          <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
            <Field
              name="volume"
              placeholder="Volume"
              component={renderInput}
              type="number"
              value={this.state.volume}
              onChange={this.onInputChange('volume')}
              validate={required}
            />

            <div>
              <button type="submit">
                Multiply by 2
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

一旦我点击按钮，值就不会改变。但是如果我使用 <input> 而不是 <field> 那么它工作正常。为什么？

Answer 1

Redux 表单输入由其 Redux 状态决定。这意味着您必须使用它的 API 来处理它们，因为 Field 正在为您的 renderInput 函数提供一个输入值，该输入值等于该字段名称的 Redux 存储中的任何值。

您需要做的是

注入字段值。这样做的一个好方法是使用 formValues()
注入一个函数，为该表单和该字段调度 change action
在你的按钮中调用这样的函数。

这是它的要点：

const MyForm = ({ double }) => {
    /* Your form implementation, then */
    <button type="submit" onClick={double}>Double and submit</button>
};

const mapDispatchToProps = (dispatch, props) => ({
    double: () => dispatch(change("foo", "number", props.number * 2))
});

const WithDoublingFunction = formValues("number")(connect(null, mapDispatchToProps)(MyForm));

export default reduxForm({
    form: "foo",
    // the rest of your config
})(WithDoublingFunction);

Here's a working sandbox of such functionality

如何使用 redux-form 进行受控输入？

How to make controlled input using redux-form?

reactjs

redux-form