将Redux-Form从JS类组件转换为Typescript函数组件

时间:2019-08-28 13:02:00

标签: typescript react-redux redux-form

我正在尝试使一个可重用的表单组件连接到Book的“新建”和“更新”实例。我是用JS完成的,但在将其移至打字稿时遇到了问题。这是父组件的代码:

class NewBook extends Component {

  onSubmit = formValues => {
    // Redux action call
    await this.props.saveBook(formValues);
  }

  render(){
    return(
      <div>
        <BookForm onSubmit={onSubmit} />
      </div>
    );
  }
}

这是表格:

class BookForm extends Component {
  onSubmit = formValues => {
    this.props.onSubmit(formValues);
  }

  renderInput = () => {
    // Renders the inputs
  }

  render(){
    return (
      <form onSubmit={this.props.handleSubmit(onSubmit)}>
        <Field id="name" component={this.renderInput} label="name" />
        <Field id="author" component={this.renderInput} label="author" />
        <button>Send</button>
      </form> 
    );
  }
}

我想防止表单处理任何操作,因此我想将表单数据发送回父级,然后由父级处理该操作。我遇到的问题是onSubmit函数和formValues。如何从父组件接收并使用onSubmit函数? formValues的类型是什么?

0 个答案:

没有答案