代码之家 › 专栏 › 技术社区 › Hai Tien

随时间增减量

reactjs

Hai Tien · 技术社区 · 6 年前

我是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 处理程序
我无法更改视图中输入的值。

请告诉我怎么解决。谢谢你的帮助。

2 回复 | 直到 6 年前

Agney Sidharth yadav 6 年前

此代码中有两个问题:

onChange 处理程序。阅读有关如何处理onChange侦听器的更多信息 here
使用来自的值 this.state.quantity setState 功能是 asynchronous

您可以使用要绕过这个问题:

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>

Ayushya 6 年前

您需要更新该值,并在输入字段上添加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>
    );
  }

user1671169 6 年前

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

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