Question

我是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>
    );
  }

我遇到的问题是：

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

请让我知道如何解决。感谢您的帮助。

Answer 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>

Answer 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>
    );
  }

Answer 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

使用React.js减少和增加数量

3 个答案: