Reactに新しい要素（新しいノード）を追加するにはどうしたらいいですか？

Question

ボタン（プラス）をクリックして新しい入力（新しいノード）を追加したいとします。私はこれをappendChild(input)で実装します。新しい入力が画面に表示され、のDeveloper Tools> Elementsに表示されますが、は表示されませんです。

Developer Tools > Elements

Developer Tools > React

onClickPlus(event) { 
    event.preventDefault(); 
    let button = event.currentTarget; 
    let input = button.previousSibling.cloneNode(true); 
    let name = input.getAttribute("name").split("."); 
    let newName = name[0] + '.' + (Number(name[1]) + 1); 
    input.setAttribute("name", newName); 
    let parent = button.parentNode; 
    parent.appendChild(input); 
    parent.appendChild(button); 
} 

は、どのように私はこれを適切にimplentことができますか？

Answer 1

私は、DOMツリーを変更し、調整プロセスに影響するため、DOMを「手動で」操作することは避けています。これにより、反応成分が完全に再現され、性能にかなりの影響を与えます。

代わりに、状態変数ejを使用します。 clickメソッドがクリックで更新されることを「可視」にします。

onClickPlus(event) { 
    event.preventDefault(); 
    this.setState({visible: true}) 
} 

あなたは+ボタン上のユーザーのクリックなど複数の入力インスタンスをレンダリングする必要がある場合は、最高の状態で、このインスタンスの配列を持っているだろう。

constructor(props){ 
    super(props) 
    this.state = { 
     inputElements: [] 
    } 
} 

onClickPlus(event) { 
    event.preventDefault(); 
    this.setState({ 
    inputElements: this.state.inputElement.concat(newElementId) 
    }) 
} 

レンダリング時にinputElement配列を反復処理します。このようにして、入力フィールドを排除するa - ボタンを持つこともできます。

グローバルな状態を持つ動的反応フォームでは、還元型のFieldArrayを強くお勧めします。