web-dev-qa-db-ja.com

React.jsで要素のテキストを編集するにはどうすればよいですか？

edit pを押したときに、button要素のテキストを編集したい。

[編集] buttonをクリックすると、textareaが表示され、アラート付きのキー付きテキストが表示されますが、そのテキストをp要素に配置できません。

React.jsでそれを行う簡単な方法は何ですか？

[〜＃〜] jsfiddle [〜＃〜]

編集ボタンを押すと、編集状態が変わり、textareaが表示されます。以下のコード。

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()
    }
  }
javascriptreactjsedit
4
Norx

状態変数からテキストを保存および取得する必要があります。状態を変更すると再レンダリングが発生し、更新されたテキストが表示されます。 JSFiddleからコピー...状態に「text」プロパティを追加した場所に注意してください

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")
)
7
Jeff McCloud

ボタンがクリックされたときにstateに値を設定し、レンダリング時にそれを読み取る必要があります。

例：

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

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

起こり得ることに従ってrenderメソッドを変更するたびに、それをトリガーするアクションは状態変更をトリガーし、状態オブジェクトを変更する必要があります。オブジェクトは再レンダリングされるため、renderメソッドは現在の状態を確認する必要があります。

入力（またはあなたの場合はtextarea）の値を変更したい場合は、linkedstateパターンを双方向のデータバインディングとして使用できます（詳細 ここ ）。

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

2
Luan Nico

私は実際にこれと同じ問題を抱えていました、これが私の解決策でした：

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

つまり、基本的には配列があります。私の場合はeditableSubTasksでした。 text要素をトリガーしてt​​extareaに変更するときはいつでも、その人をedtiableSubTasks配列に追加するだけです。そして、私のmap関数で、対応するアイテムのIDがeditableSubTasks配列にある場合、三項演算子を使用してそれを<input type="text">、それ以外の場合はspanのみ。あなたの場合、明らかにテキストエリアを使用できます。これは素晴らしくうまくいきました。これが私のSOで、最終的に使用した答えは次のとおりです。

reactでアイテムのリストを動的に表示/非表示にする方法

配列が必要ない場合、答えはさらに簡単です。ブール値を設定し、テキスト領域にしたい場合はtrueに変更してください。

1
jdmdevdotnet