setStateによってリロードされるオブジェクトにrefを追加できません

Question

オブジェクトのrefを追加する必要があったのは、その値をクリアする必要があったからです。 私は次のように書いた：私はボタンをクリックすると、既存のフォームがクリアされ、他のいくつかのフォーム：私がやりたいすべてがシンプルである

Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded 

：

this.code = (
    <div className="form-group"> 
      <label className="form-label" htmlFor="target">Target</label> 
      <input className="input" onChange={this.handleChange.bind(this)} ref="textbox" id="target" type="text" placeholder="Target" /> 
     </div> 
); 
this.setState(this.state); 

などのエラーを得ました登場するだろう。そのために、私はsetStateメソッドを使ってみました。それは間違ったアプローチですか？

Answer 1

ReactOwnerだけがrefを持つことができます。あなたは、コンポーネントのrenderメソッド内で作成されていない コンポーネントへの参照を追加 かが反応ドキュメントによると

ロードされた反応の複数のコピー持っていることがあります

This usually means one of two things: 

1. You are trying to add a ref to an element that is being created outside of a component's render() function. 
2. You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured NPM dependency) 

あなたのケースをあなたがレンダリング関数の外でドキュメントオブジェクトを作成しようとしている最初のものと思われます。

ソリューションは、ドキュメントオブジェクト

renderInput =() => { 
    return (
     <div className="form-group"> 
      <label className="form-label" htmlFor="target">Target</label> 
      <input className="input" onChange={this.handleChange.bind(this)} ref={(ref) => this.textbox = ref} id="target" type="text" placeholder="Target" /> 
     </div> 
    ) 
} 
render() { 
    return (
     <div> 
      {this.renderInputForm()} 
     </div> 
    ) 
} 

P.S.を返すレンダリング関数から呼び出される関数を持っているだろうReactは、文字列の参照の代わりに参照のためのコールバックのアプローチを使用することを提案します。この回答を確認してください：

Invalid Refsの場合も

In React .js: is there any function similar like document.getElementById() in javascript ? how to select certain object?

：

のみReactOwnerは、引用文献を持つことができます。これは通常、 に、所有者を持たないコンポーネントに参照を追加しようとしていることを意味します（つまり、 は別のコンポーネントのrenderメソッドの内部で作成されていません）。このコンポーネントを の新しいトップレベルコンポーネントの内部にレンダリングしてください。 はrefを保持します。