反応を使用してデータを編集しようとしています

Question

私は解決しようとしている問題について非常に混乱しています。 Reactを使用してページ上のデータをレンダリングすることはできますが、編集ボタンをクリックしたときに値を変更できるようにしたいと考えています。ボタンをクリックしたときに新しいデータを要求するプロンプトが表示され、新しいデータをページ上の古いデータと置き換えたいとします。 editItem関数は、これを実行しようとしているところです。これを解決する方法に関する提案は、非常に有用です。

const NewProduct = React.createClass({ 
    render: function() { 
    return (
     <section> 
      <div>Name: {this.props.name}</div> 
      <div>Price: {this.props.price}</div> 
      <div>Category: {this.props.category}</div> 
      <button className="deleteButton" onClick={this.deleteItem}>Delete</button> 
      <button className="editButton" onClick={this.editItem}>Edit</button> 
     </section> 
    ); 
    }, 

    deleteItem: function() { 
     console.log(this.props.id); 
     this.props.product.destroy(); 
    }, 

    editItem: function() { 
    var name = prompt('What should the new name be?'); 
    <div>Name: {this.name.value}</div> 
    } 

}); 

export default NewProduct; 

Answer 1

これを実現するには、ローカルステートとライフサイクルの方法を利用できます。

const NewProduct = React.createClass({ 
     constructor(props) { 
     super(props); 
     const entity = { 
      name: '', 
      price : '', 
      category: '', 
     }; 
     this.state = { 
      entity : entity 
     }; 
     } 

     componentWillReceiveProps(newProps){ 
     const entity = newProps.props; 
     const entity = { 
      name: entity.name, 
      price : entity.price, 
      category: entity.category, 
     }; 
     this.setState({ 
      entity: entity 
      }); 
     } 

     render: function() { 
     const entity = this.state.entity; 
     return (
      <section> 
       <div>Name: {entity.name}</div> 
       <div>Price: {entity.price}</div> 
       <div>Category: {entity.category}</div> 
       <button className="deleteButton" onClick={this.deleteItem}>Delete</button> 
       <button className="editButton" onClick={this.editItem}>Edit</button> 
      </section> 
     ); 
     }, 

     deleteItem: function() { 
      console.log(this.props.id); 
      this.props.product.destroy(); 
     }, 

     editItem: function() { 
     var name = prompt('What should the new name be?'); 
     // here you need to just update the state based on the promt values or use a callback function passing the values and update the state. 
     } 

    }); 

    export default NewProduct; 

Answer 2

これには2つの方法があります。

更新あなたは現在、常にthis.props.name値に基づいてnameをレンダリングしている

小道具。これを更新したい場合は、値を更新する必要があるときに親コンポーネントに通知してから、親コンポーネントが新しいプロップ値を子に返すようにしなければなりません。

例

editItem: function() { 
    var name = prompt('What should the new name be?'); 
    /* 
    handleNewName would be a function passed in as a prop from the parent component. 
    It will then be on the parent component to update the name, and pass in 
    the updated name as a prop, which will trigger a re-render and update the 
    value on the child NewProduct component. 
    */ 
    this.props.handleNewName(name); 
} 

導入状態

あなたがこれを扱うことができる第二の方法は、このコンポーネントへのローカル状態を導入することです。

例

const NewProduct = React.createClass({ 
    getInitialState: function() { 
    // Get initial value from props. 
    return { 
     name: this.props.name 
    } 
    }, 
    render: function() { 
    return (
     <section> 
      <div>Name: {this.state.name}</div> 
      <div>Price: {this.props.price}</div> 
      <div>Category: {this.props.category}</div> 
      <button className="deleteButton" onClick={this.deleteItem}>Delete</button> 
      <button className="editButton" onClick={this.editItem}>Edit</button> 
     </section> 
    ); 
    }, 

    deleteItem: function() { 
    this.props.product.destroy(); 
    }, 

    editItem: function() { 
    var name = prompt('What should the new name be?'); 
    this.setState({ name }) 
    } 

}); 

export default NewProduct;