使用 Reactjs 减少和增加数量答案

【问题标题】：Decrement and increment quantity with Reactjs使用 Reactjs 减少和增加数量
【发布时间】：2018-10-10 06:39:14
【问题描述】：

我是 Reactjs 的新手，我正在制作一个增加和减少数量的函数。我的代码如下：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quantity: 1,
      show: true,
      max:5,
      min:0
    };
  }

  IncrementItem = () => {
    if(this.state.quantity > 9) {

    }else {
        this.setState({
            quantity: this.state.quantity + 1 
        });
    }
  }
  DecreaseItem = () => {
    if(this.state.quantity <= 1) {

    }else {
        this.setState({ quantiy: this.state.quantity - 1 });
    }
  }
  ToggleClick = () => {
    this.setState({ show: !this.state.show });
  }

  render() {

    return (
    <div>
        <button onClick={this.IncrementItem}>+</button>
         <input className="inputne" value={this.state.quantity} />
         <button onClick={this.DecreaseItem}>-</button>
    </div>
    );
  }

我的问题是：

浏览器出现错误：警告：失败的道具类型：您向没有onChange 处理程序的表单字段提供了value 道具
我无法从 View 更改输入值。

请告诉我如何解决。感谢您的帮助。

【问题讨论】：

标签： reactjs

【解决方案1】：

这段代码有两个问题：

没有onChange 处理程序。阅读更多关于如何处理 onChange 监听器here
使用来自this.state.quantity 的值来递增和递减是不好的做法，因为setState 函数是asynchronous。

您可以使用setState 的功能版本来解决这个问题：

this.setState(prevState => {
  if(prevState.quantity > 0) {
    return {
      quantity: prevState.quantity - 1
    }
  } else {
    return null;
  }
});

代码片段：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quantity: 1,
      show: true,
      max: 5,
      min: 0
    };
  }

  IncrementItem = () => {
      this.setState(prevState => {
        if(prevState.quantity < 9) {
          return {
            quantity: prevState.quantity + 1
          }
        } else {
          return null;
        }
      });
  }
  DecreaseItem = () => {
    this.setState(prevState => {
      if(prevState.quantity > 0) {
        return {
          quantity: prevState.quantity - 1
        }
      } else {
        return null;
      }
    });
  }
  ToggleClick = () => {
    this.setState({
      show: !this.state.show
    });
  }
  handleChange = (event) => {
    this.setState({quantity: event.target.value});
  }

  render() {

    return ( <div>
      <button onClick={this.IncrementItem}>+</button>
      <input className="inputne" value={this.state.quantity} onChange={this.handleChange}/>
      <button onClick = {this.DecreaseItem}>-< /button>
      </div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：

感谢您的解释。我正在练习。对我很有用

【解决方案2】：

您需要更新值，在输入字段上添加一个 onChange 来执行此操作。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quantity: 1,
      show: true,
      max:5,
      min:0
    };
  }

  IncrementItem = () => {
    if(this.state.quantity > 9) {

    }else {
        this.setState({
            quantity: this.state.quantity + 1 
        });
    }
  }
  DecreaseItem = () => {
    if(this.state.quantity <= 1) {

    }else {
        this.setState({ clicks: this.state.quantity - 1 });
    }
  }
  ToggleClick = () => {
    this.setState({ show: !this.state.show });
  }

  UpdateValue = (e) => {
    this.setState({ quantity: e.target.value });
  }

  render() {

    return (
    <div>
        <button onClick={this.IncrementItem}>+</button>
         <input className="inputne" value={this.state.quantity} onChange={this.UpdateValue} />
         <button onClick={this.DecreaseItem}>-</button>
    </div>
    );
  }

【讨论】：

很有用。非常感谢！！

【解决方案3】：

试试这个，也许对你有帮助

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 4, max: 15, min: 0, show: true },
      { id: 2, value: 0 }`enter code here`
    ]
  };

  handleIncrement = counter => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    if (counters[index].value < counters[index].max) {
      counters[index].value++;
    }
    this.setState({ counters });
  };
  handleDecrement = counter => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    if (counters[index].value > counters[index].min) {
      counters[index].value--;
    }
    this.setState({ counters });
  };
  handleDelete = counterId => {
    const counters = this.state.counters.filter(c => c.id !== counterId);
    this.setState({ counters });
  };

  render() {
    return (
      <div>
        {this.state.counters.map(counter => (
          <Counter
            key={counter.id}
            onDelete={this.handleDelete}
            onIncrement={this.handleIncrement}
            onDecrement={this.handleDecrement}
            counter={counter}
          />
        ))}
      </div>
    );
  }
}

export default Counters;

    enter code here

【讨论】：