javascript - 无法在 React 中设置文本框值

Question

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      amount:1000000
    }
   }
  handleChange= (e)=> {
    const number= Number(e.target.value).toLocaleString();
    console.log(number);
    this.setState({
      amount: number
    })
  }
  render() {
    return (
      <div>
       <input onChange={this.handleChange} value={this.state.amount.toLocaleString()}/>
      </div>
    )
  }
}

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

我是一名新的前端开发人员。我无法将文本框的值更改为超过 9,999。我得到 NaN

https://codesandbox.io/s/y2lrywpk21

Answer 1

问题是一旦你达到数千，你就引入了逗号。当您尝试将其转换为数字时，逗号会导致问题。使用它来去除逗号:.replace(/,/g, '')。

在显示值时，您还应该只使用 .toLocalString。设置状态和读取状态时不需要使用它。

工作示例:

class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      amount:1000000
    }
   }
  handleChange= (e)=> {
    const number= Number(e.target.value.replace(/,/g, ''));
    console.log(number);
    this.setState({
      amount: number
    })
  }
  render() {
    return (
      <div>
       <input onChange={this.handleChange} value={this.state.amount.toLocaleString()}/>
      </div>
    )
  }
}

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

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