React.jsで要素のテキストを編集するには？

Question

編集buttonを押すと、pの要素のテキストを編集したいと思います。私は編集buttonをクリックすると

、私はtextareaを表示し、警告とキー付きテキストを取得私p要素にそのテキストを入れることはできません。

React.jsで簡単な方法は何ですか？

JSFIDDLE

私が編集ボタンを押すと、状態変化するとテキストエリアを編集すると、以下のコードをup.The示しています。

renderNormal: function() { 
    return (
     <div> 
     <p>Edit me</p> 
     <button onClick={this.edit}>Edit</button> 
    </div> 
    ) 
    }, 
    renderForm: function() { 
    return (
     <div> 
     <textarea ref="newText" defaultValue="Edit me"></textarea> 
     <button onClick={this.save}>Save</button> 
    </div> 
    ) 
    }, 
    render: function() { 
    if (this.state.editing) { 
     return this.renderForm() 
    } else { 
     return this.renderNormal() 
    } 
    } 

Answer 1

状態変数からテキストを保存して取得する必要があります。状態を変更すると再レンダリングが行われ、更新されたテキストが表示されます。だから、

{editableSubTasks.filter(id => id === subTask.Id).length > 0 ? <input type="text" /> : <span>{subTask.Name}</span>}

：あなたのJSFiddleからコピーされた...私は実際にこの同じ問題を抱えていた

var MyCom = React.createClass({ 
    getInitialState: function() { 
    return { 
     editing: false, 
     // ** Initialize "text" property with empty string here 
     text: '' 
    } 
    }, 
    edit: function() { 
    this.setState({ 
     editing: true 
    }) 
    }, 
    save: function() { 
    var val = this.refs.newText.value; 
    alert(val) 
    this.setState({ 
     // ** Update "text" property with new value (this fires render() again) 
     text: val, 
     editing: false 
    }) 
    }, 
    renderNormal: function() { 
    // ** Render "state.text" inside your <p> whether its empty or not... 
    return (
     <div> 
     <p>{this.state.text}</p> 
     <button onClick={this.edit}>Edit</button> 
    </div> 
    ) 
    }, 
    renderForm: function() { 
    return (
     <div> 
     <textarea ref="newText" defaultValue="Edit me"></textarea> 
     <button onClick={this.save}>Save</button> 
    </div> 
    ) 
    }, 
    render: function() { 
    if (this.state.editing) { 
     return this.renderForm() 
    } else { 
     return this.renderNormal() 
    } 
    } 
}) 

ReactDOM.render(
    <div> 
    <MyCom/> 
    <MyCom/> 
    </div>, 
    document.querySelector(".box") 
) 

Answer 2

あなたがクリックされたボタンのstate上の値を設定し、レンダリングその上読まなければなりません。

例：あなたが起こることができるものに応じて変更するためのrenderメソッドをしたい

handler : function() { 
    this.setState({ value : 'hey' }); 
}, 

render : function() { 
    return <p>{ this.state && this.state.value ? this.state.value : 'hoy' }</p>; 
} 

毎回、それをトリガーアクションが状態変化をトリガし、状態オブジェクトを変更する必要があり、かつ対象になります再レンダリングされるので、レンダリングメソッドは現在の状態をチェックする必要があります。

入力の値（またはあなたの場合はテキストエリア）を変更するには、linkedstateパターンを双方向データバインディング（more here）として使用できます。

特にthis libを使用します。そこにはたくさんの例があります。

Answer 3

私はあなたの状態に「テキスト」プロパティを追加したところに注意し、ここに私の解決策でした基本的に配列がありますが、私の場合はeditableSubTasksでした。テキスト要素をテキストエリアに変更するようにトリガするときは、その人をedtiableSubTasks配列に追加するだけです。そして、私のmap関数では、対応するアイテムのIDがeditableSubTasksの配列であれば、それは<input type="text">であることを伝えるために3進演算子を使用します。そうでない場合はspanとなります。あなたのケースでは、明らかにテキストエリアを使用することができます。これはすごくうまくいった。ここに私が使用して終了答えを私のSOた：

How to dynamically show/hide a list of items in react

あなたは配列を必要としない場合は、答えはさらに簡単です、ただブール値を持っており、これをtrueに変更するときにテキスト領域にしたい。