Reactの上位コンポーネントからフォームをリセットするにはどうすればよいですか？

Question

Iamはコンポーネントを上位コンポーネントに渡すreact.jsでアプリケーションを実行しています。今度はPersonalInformationコンポーネントにフォームを送信した後、フォームはリセットされていません。これはrefでは起こりません。

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

異なるコンポーネントからの参照にはアクセスできません。 this.refsは、その特定のコンポーネントで定義されているrefを参照します。

handleSubmit関数でコールバックメソッドを渡すことができ、handlesubmitはフォームをリセットするときにそのメソッドを呼び出します。この

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

そして

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

handleSubmitを呼び出している間、あなたの子コンポーネントで使用すると、コールバックメソッドを渡すような何か

Answer 2

thisは手に成分を意味します。あなたは別のコンポーネントのリファレンスを探しているので、動作しません。

この行では、this.refs.form.reset();の代わりに、resetForm:trueのような状態を設定し、それを子コンポーネントに渡します。次に、フォームを、小道具を経由して渡される状態に基づいて、そこに住むコンポーネントからリセットすることができます。