时间戳

首页 > 解决方案 > 在清除的字符串中异步连接单击的数字

javascript - 在清除的字符串中异步连接单击的数字

问题描述

我的小型 React 实验的目标是“清除this.state.numString（输出一个空字符串）的初始值，然后将点击的数字连接成this.state.numString”。为了使其异步执行，我利用了this.setState's 回调，其中发生了数字字符串的连接。

class App extends Component {
  state = {
    numString: '12'
  }

  displayAndConcatNumber = (e) => {
    const num = e.target.dataset.num;

    this.setState({
      numString: ''
    }, () => {
      this.setState({
        numString: this.state.numString.concat(num)
      })
    })
  }

  render() {
    const nums = Array(9).fill().map((item, index) => index + 1);
    const styles = {padding: '1rem 0', fontFamily: 'sans-serif', fontSize: '1.5rem'};

    return (
      <div>
        <div>
          {nums.map((num, i) => (
            <button key={i} data-num={num} onClick={this.displayAndConcatNumber}>{num}</button>
          ))}
        </div>
        <div style={styles}>{this.state.numString}</div>
      </div>
    );
  }
}

结果出乎我的意料；它只会将我单击的当前数字添加到空字符串中，然后将其更改为我接下来单击的数字，不会发生字符串数字的串联。

标签： javascriptstringreactjsasynchronousconcatenation

解决方案

这是执行此操作的一种方法。正如我在评论中所说，您正在重置每个setState. 所以，你需要某种条件来做到这一点。

class App extends React.Component {
  state = {
    numString: '12',
    resetted: false,
  }

  displayAndConcatNumber = (e) => {
    const num = e.target.dataset.num;

    if ( !this.state.resetted ) {
      this.setState({
        numString: '',
        resetted: true,
      }, () => {
        this.setState( prevState => ({
         numString: prevState.numString.concat(num)
        }))
      })
    } else {
      this.setState(prevState => ({
        numString: prevState.numString.concat(num)
      }))
    }
  }

  render() {
    const nums = Array(9).fill().map((item, index) => index + 1);
    const styles = { padding: '1rem 0', fontFamily: 'sans-serif', fontSize: '1.5rem' };

    return (
      <div>
        <div>
          {nums.map((num, i) => (
            <button key={i} data-num={num} onClick={this.displayAndConcatNumber}>{num}</button>
          ))}
        </div>
        <div style={styles}>{this.state.numString}</div>
      </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>

推荐阅读