javascript - 如何在 redux-form 7.0.0 中获取 <Field> 值

标签 javascript reactjs redux redux-form

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const { Add, noteList } = this.props;
    Add('this is title's value' , 'this is content's value');
  }

  render() {
    const { handleSubmit, noteList: { list } } = this.props;
    return (
      <form onSubmit={handleSubmit(this.handleClick)}>
        <div>
          <Field className="title" name="title" component="input" type="text" />
        </div>
        <div>
          <Field className="content" name="content" component="textarea" />
        </div>
        <div>
          <button type="submit" onClick={(e) => { list ? this.handleClick : e.preventDefault(); }}>add</button>
        </div>
      </form>
    );
  }
}

当我点击按钮时,我希望将这两个值放入一个函数中添加为两个参数来做一些异步的事情,我应该怎么做,请帮助我

最佳答案

handleClick函数中的字段值可以作为对象在onSubmit中获取。

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(values) {
    const { Add, noteList } = this.props;
    Add(values.title , values.content);
  }

  render() {
    const { handleSubmit, noteList: { list } } = this.props;
    return (
      <form onSubmit={handleSubmit(this.handleClick)}>
        <div>
          <Field className="title" name="title" component="input" type="text" />
        </div>
        <div>
          <Field className="content" name="content" component="textarea" />
        </div>
        <div>
          <button type="submit" onClick={(e) => { list ? this.handleClick : e.preventDefault(); }}>add</button>
        </div>
      </form>
    );
  }
}

关于javascript - 如何在 redux-form 7.0.0 中获取 <Field> 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45143637/

相关文章:

javascript - 删除只有空白的数组元素

Next.js 中每页的 CSS 拆分

reactjs - (React-Native) undefined 不是一个对象(评估 _'this.props.navigation.navigate' )

reactjs - 动态创建复选框并为相同的 : Semantic-ui-react + React 添加更改处理程序

reactjs - 动态更改 Material-ui 主题 --> 不会影响 child

javascript - 拉取api时redux中未定义数据

javascript - 如何更改默认的 parsley.js UI/UX 行为?

javascript - <div> 中的 jquery 可调整大小的 Canvas

javascript - 无法使用 jquery 插件弹出窗口

javascript - Redux - 在操作或 reducer 中调用函数链?