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

Question

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

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

结果不是我所期望的；它只会将我单击的当前数字添加到空字符串中，然后将其更改为我接下来单击的数字，不会发生字符串数字的连接。

Answer 1

这是一种方法。正如我在评论中所说，您正在重置每个 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>