React 尝试编辑输入但出现错误

Question

I'm working on the edit/update the prices in the price list in my React app. I'm almost close but was unable to input any changes. Every time I tried to change the price in the input, I get an error saying "TypeError: onChange is not a function"...

I'm trying to write my code that's almost similar to this tutorial: https://medium.com/the-andela-way/handling-user-input-in-react-crud-1396e51a70bf#8858

So far, I was able to toggle the price between input field and back but I'm trying to edit the input to save any changes...What am I missing? I kept checking between my code and this tutorial to make sure everything is working...

Here's my code (functions) in the Parent component, PriceForm.js :

toggleItemEditing = index => {
    this.setState({
      priceArr: this.state.priceArr.map((item, itemIndex) => {
        if (itemIndex === index) {
          return {
            ...item,
            isEditing: !item.isEditing
          }
        }
        return item;
      })
    });
  };

  handlePriceUpdate = (event, index) => {
    const target = event.target;
    const value = target.value;
    const number = target.number;
    this.setState({
      priceArr: this.state.priceArr.map((item, itemIndex) => {
        if (itemIndex === index) {
          return {
            ...item,
            [number]: value
          }
        }
        return item;
      })
    });
    console.log("price update", event);
  };

and where it's called in:

{this.state.priceArr.map((props, index) => (
              <PriceBox
                {...props}
                key={props.date}
                toggleEditing={this.toggleItemEditing}
                handleDeletePrice={this.handleDeletePrice}
                onChange={this.handlePriceUpdate}
              />
            ))}

And here's my code for the Child component, SinglePriceBox.js :

import React, { Component } from "react";

export default class SinglePricebox extends Component {
  constructor(props) {
    super(props);

    this.state = {
    isInEditMode: false,
    todaydate: this.props.date
  };

  this.toggleEditPriceSubmission = this.toggleEditPriceSubmission.bind(this);
}

toggleEditPriceSubmission() {
  this.setState(state => ({ isInEditMode: !state.isInEditMode }));
}


  render() {
    const { isInEditMode, onChange, index } = this.state;
    return (
      <div className="pricebox">
        <article className="pricetable">
          <table>
            <tbody>
              <tr>
                <td className="date-width">{this.props.date}</td>
                <td className="price-width">
                {isInEditMode ? (
                    <input type="text" name="number" value={this.props.number} onChange={event => onChange(event, index)} />
                  ) : (
                    this.props.number
                  )}
                </td>
                <td className="editing-btn">
                  <button
                    type="button"
                    className="edit-btn"
                    onClick={this.toggleEditPriceSubmission}
                  >
                    {isInEditMode ? "Save" : "Edit"}
                  </button>
                </td>
                <td>
                {this.props.handleDeletePrice && (
                  <button
                    type="button"
                    className="delete-btn"
                    onClick={() => this.props.handleDeletePrice(this.props.date)}
                    >
                      X
                    </button>
                    )}
                </td>
              </tr>
            </tbody>
          </table>
        </article>
      </div>
    );
  }
}

You can check out my demo at https://codesandbox.io/s/github/kikidesignnet/caissa . You will be able to check out the error if you click on Prices button, then click on Edit button to change the price in the input field that appears.

Answer 1

In the following line:

<input type="text" name="number" value={this.props.number} onChange={event => onChange(event, index)} />

You're calling this.state.onChange but there is no onChange in your state:

this.state = {
    isInEditMode: false,
    todaydate: this.props.date
  };

After looking at your codesandbox, it seems that onChange is passed as a props to PriceBox, so you should do this in SinglePriceBox render():

const { isInEditMode, index } = this.state;
const { onChange } = this.props;

This will remove the error you were having, but the update still doesn't work because target.number is undefined in PriceForm.handlePriceUpdate:(

However target.name is defined and equal to 'number' which is a valid key in your price list

Answer 2

import React, { Component } from "react";

export default class SinglePricebox extends Component {
  constructor(props) {
    super(props);

    this.state = {
    isInEditMode: false,
    todaydate: this.props.date
  };

  this.toggleEditPriceSubmission = this.toggleEditPriceSubmission.bind(this);
this.handleChange = this.handleChange.bind(this);
}

toggleEditPriceSubmission() {
  this.setState(state => ({ isInEditMode: !state.isInEditMode }));
}

handleChange = (e, index) => {
  // write your code here
}


  render() {
    const { isInEditMode, index } = this.state;
    return (
      <div className="pricebox">
        <article className="pricetable">
          <table>
            <tbody>
              <tr>
                <td className="date-width">{this.props.date}</td>
                <td className="price-width">
                {isInEditMode ? (
                    <input type="text" name="number" value={this.props.number} onChange={event => this.handleChange(event, index)} />
                  ) : (
                    this.props.number
                  )}
                </td>
                <td className="editing-btn">
                  <button
                    type="button"
                    className="edit-btn"
                    onClick={this.toggleEditPriceSubmission}
                  >
                    {isInEditMode ? "Save" : "Edit"}
                  </button>
                </td>
                <td>
                {this.props.handleDeletePrice && (
                  <button
                    type="button"
                    className="delete-btn"
                    onClick={() => this.props.handleDeletePrice(this.props.date)}
                    >
                      X
                    </button>
                    )}
                </td>
              </tr>
            </tbody>
          </table>
        </article>
      </div>
    );
  }
}

Answer 3

the problem is in how you pass your function as a prop. You should pass the function call in this way:

<PriceBox
   {...props}
   [...]
   onChange={(e) => this.handlePriceUpdate(e, index)}
/>

Then call it in your child component:

<input 
  type="text" 
  [...]
  onChange={event => this.props.onChange(event, index)} 
/>

Also, I would not using index here, I would rather use an ID from your object instead