how to get <Field> values in redux-form 7.0.0

Question

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

when i click the button, i hope to get these two values into a function Add as two arguments to do something async, what should i do , help me please

Answer 1

The field values in handleClick function can can be obtained onSubmit as an object.

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