Question

我有一个反应组件。我从我的顶级组件传递updateInventory函数。

Scores              Students                            Avg.
40  94  40  94      'AE'    'DA'    'AI'    'AR'        67
40  90  40  88      'AK'    'CI'    'AM'    'BP'        64.5
40  85  40  80      'AQ'    'AW'    'AT'    'BD'        61.25
40  79  40  77      'AU'    'BC'    'AV'    'AB'        59
40  76  40  75      'AX'    'CG'    'AZ'    'CQ'        57.75
40  75  40  75      'BF'    'CB'    'BN'    'BQ'        57.5
40  75  40  74      'BR'    'BI'    'CF'    'CZ'        57.25
40  74  40  74      'CK'    'CO'    'CP'    'AL'        57
40  72  41  71      'DB'    'CN'    'AG'    'BO'        56
41  71  42  70      'CD'    'BM'    'AH'    'BS'        56
42  70  42  69      'BG'    'BL'    'CU'    'CX'        55.75
43  68  44  67      'BK'    'CY'    'AD'    'CE'        55.5
44  64  44  64      'BJ'    'CR'    'BZ'    'BY'        54
45  64  45  63      'BW'    'BV'    'CS'    'BE'        54.25
45  62  47  60      'CV'    'CH'    'AC'    'CM'        53.5
47  59  47  58      'BT'    'AY'    'CL'    'AP'        52.75
47  57  48  57      'CT'    'BA'    'BX'    'AS'        52.25
48  56  49  56      'CA'    'AJ'    'AN'    'AA'        52.25
50  55  50  54      'BB'    'AF'    'CJ'    'AO'        52.25
51  52  51  52      'CC'    'BU'    'CW'    'BH'        51.5

在我的顶级组件中：

class Inventory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.name,
      price: this.props.price,
      id: this.props.id
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  render(props) {
    return (
      <form onSubmit={(e)=>this.props.updateInventory(e, this.state)}>
        <input name='name' value={this.state.name} onChange={this.handleChange} />
        <input name='price' type='number' value={this.state.price} onChange={this.handleChange} />
        <button type='submit'>Update</button>
      </form>
    )
  }
};

export default Inventory;

这似乎到目前为止工作（我还没有更新我的顶级状态）但我可以看到，当我更新价格时，新值是一个字符串而不是整数。我希望只为我的所有输入设置一个handleChange函数，因为添加更多功能，这可能吗？

Answer 1

您可以检查target的类型和名称，并相应地处理该值。

例如

this.setState({
  [e.target.name]: e.target.type === 'number' ? parseInt(e.target.value) : e.target.value
});

// or

this.setState({
  [e.target.name]: e.target.name === 'price' ? parseFloat(e.target.value) : e.target.value
});

Answer 2

您可以使用Input元素的valueAsNumber属性

例如：

handleChange(e) {
    this.setState({
        [e.target.name]: e.target.valueAsNumber || e.target.value
    });
}

e.target.valueAsNumber将为您提供数值，如果输入为空，则为NaN。

如果|| e.target.value是NaN，则valueAsNumber是备用。

Answer 3

parseFloat中的onChange将不起作用，因为4.将被解析为4，并且用户将无法键入任何新数字。检查react-input-number中是否有数字输入。

React中的数字输入是字符串而不是整数

3 个答案: