时间戳

首页 > 解决方案 > 无法在 React 中设置文本框值

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

问题描述

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

标签： javascriptreactjs

解决方案

问题是一旦你进入数千个，你就会引入逗号。当您尝试将逗号转换为数字时，逗号会导致问题。使用它来去除逗号：.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"/>

推荐阅读