Question

我在react.js中做了一个app，其中iam将一个组件传递给更高阶的组件。现在在PersonalInformation组件中提交表单后，表单需要重置哪个没有发生。这不是由refs发生的。

class PersonalInformation extends Component{
render(){
return(
  <div>
    <h3>Personal Information</h3>
    <Form onSubmit={this.props.handleSubmit} ref="form" name="form">
      <fieldset disabled={this.props.disabled}>
        <Input type="text" name="firstName" title="FirstName" value=""/><br/>
        <Input type="text" name="lastName" title="LastName" value=""/><br/>
        <Input type="text" name="fatherName" title="Fathers's Name" value=""/><br/>
        <Input type="text" name="motherName" title="Mother's Name" value=""/><br/>
      </fieldset>
      <button className="btn btn-default">{this.props.buttonName}</button>
    </Form>
  </div>
)
}
}

现在高阶组件是：

var MyHoc = function(AbstractComponent){
return class extends React.Component {
constructor(props){
  super(props);
  this.state={
    buttonName:'Edit',
    disabled:true,
    anotherForm:false
  }
  this.handleSubmit=this.handleSubmit.bind(this);
  this.newForm=this.newForm.bind(this);
}
handleSubmit(data){
  this.setState({
    buttonName:'Save',
    disabled:false
  })
  if(!this.state.disabled){
    console.log(data);
    this.refs.form.reset();
  }
}
newForm(){
  this.setState({
    anotherForm:true
  })
}
render() {
  return <AbstractComponent {...this.state} handleSubmit={this.handleSubmit}
  newForm={this.newForm} />;
}
}
}

export default MyHoc(PersonalInformation);

Answer 1

您无法从不同的组件访问refs。 this.refs引用该特定组件中定义的ref。

你可以在handleSubmit函数中传递一个回调方法，handleubmit会在想要重置表单时调用该方法。像这样的东西

handleSubmit(data, resetFormCallback){
  this.setState({
    buttonName:'Save',
    disabled:false
  })
  if(!this.state.disabled){
    console.log(data);
    resetFormCallback();
  }
}

然后在您的子组件中，在调用handleSubmit

时传递回调方法

class PersonalInformation extends Component{
resetForm = () => {
    this.refs.form.reset();
  }

render(){
return(
  <div>
    <h3>Personal Information</h3>
    <Form onSubmit={(data) => {this.props.handleSubmit(data, this.resetForm)}} ref="form" name="form">
      <fieldset disabled={this.props.disabled}>
        <Input type="text" name="firstName" title="FirstName" value=""/><br/>
        <Input type="text" name="lastName" title="LastName" value=""/><br/>
        <Input type="text" name="fatherName" title="Fathers's Name" value=""/><br/>
        <Input type="text" name="motherName" title="Mother's Name" value=""/><br/>
      </fieldset>
      <button className="btn btn-default">{this.props.buttonName}</button>
    </Form>
  </div>
)
}
}

Answer 2

this指的是手中的组件。你正在寻找另一个组件的参考，所以这不会起作用。

在此行：this.refs.form.reset();而是设置一些状态，如resetForm:true，然后传递给您的子组件。然后，您可以根据通过道具传递给它的状态，从其所在的组件重置您的表单。

如何从React中的高阶组件重置表单？

2 个答案: