Reactで要素を作成する

Question

Reactで要素がどのように作成されるのか分かりません。

私はrefsの値を使用してフォーム送信時に要素を作成することを目標にしていますので、フォーム内のすべての送信に対して、内部にテキストボックスの内容を含む新しい<h1>タグを作成します。基本的に私の考えは、私はこの方法にnewPostの変数を割り当て、私のコンポーネントの中でそれを呼んでいる私のaddHeader()機能である

... 

addHeader(e) { 
    e.preventDefault(); 
    const newHeader = this.refs.post.value; 
    var newpost = React.createElement("h1", { 
     type: "text", 
     value: newHeader 
    }); 
    } 

... 

render() { 
    return (
     <div className="form-section"> 
      { newPost } 
      <form onSubmit={this.addHeader.bind(this)}> 
       <input id="input-post" type="text" placeholder="Post Here" ref="post" /> 
       <input type="submit" value="Submit" /> 
      </form> 
      <button className="form-section__submit" onClick={this.clearFields.bind(this)}>Clear All</button>  
     </div> 
    ); 
    } 

：私は何をしようとしているのサンプルは次のようになります。このコードは、2つのエラーの原因となっている。

33：9警告 'newpost' は値が割り当てられますが49:13エラー 'newPostは'

無undefを定義しないされない未使用-varsのない

を使用することはありません

私は理解できませんが、私はその変数に値を割り当てており、それをレンダリングしているコンポーネントで使用しています...それと一緒に、私はしませんこのエラーメッセージを理解してください。何かに値を割り当てることができますが、同時に定義されていないものは...？それは間違った範囲にあるからですか？新しい要素がコンポーネント内で具体的にレンダリングされる場所を宣言するにはどうすればよいですか？

I read the documentationしかし、新しい要素がどこにレンダリングされるかを制御する方法については明確な答えはありません。

Answer 1

コードを少し変更しました。 constructorでコンポーネントの状態を初期化する必要があります。 addHeaderメソッドではthis.setStateを使用して、this.inputの値を含む新しい投稿の値でコンポーネントの状態を更新します。入力のrefを実際の照会に変更しました。要素を取り、thisに保存します。新しい投稿を追加するたびにtextareaの値を持つ新しい<h1>が表示されます。余談として

... 

addHeader(e) { 
    e.preventDefault(); 
    this.setState((prevState, props) => { 
     return { posts: [ ...prevState.posts, this.input.value ] }; 
    }); 
    } 

... 

render() { 
    const { posts } = this.state; 
    return (
     <div className="form-section"> 
      { posts.map(text => <h1>{ text }</h1>) } 
      <form onSubmit={this.addHeader.bind(this)}> 
       <input id="input-post" type="text" placeholder="Post Here" ref={ el => this.input = ref } /> 
       <input type="submit" value="Submit" /> 
      </form> 
      <button className="form-section__submit" onClick={this.clearFields.bind(this)}>Clear All</button>  
     </div> 
    ); 
    } 

：反応するコンポーネントのrender方法でバインド機能は、パフォーマンスヒットが発生します。すべてのレンダリングでこの関数のコンテキストを再バインドする必要はありません。 this.clearFields.bind(this)はthis.clearFieldsになりますので、constructorにthis.clearFields = this.clearFields.bind(this)を追加する必要があります。コールバックとして使用されていない関数をバインドする必要はありません。

this.addHeader.bind(this)についても同じことをしたいと思っています。