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

Question

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

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>
    );
  }
}

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

Answer 1

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

您需要做的是

1. 插入字段值。这样做的一个好方法是使用 formValues()
2. 注入(inject)一个调度 change action 的函数对于该表单和该字段
3. 在您的按钮中调用此类函数。

这就是它的要点:

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