尝试使用react编辑数据

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

您可以采用两种方法。

更新道具

您当前始终根据this.props.name值呈现name 。 如果您想更新此值，则必须在值应更新时通知您的父组件，然后让父组件将新的prop值传回给子对象。

例

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;