數字輸入字符串不是整數在反應

Question

我有一個反應組件。我從頂層組件傳遞updateInventory函數。

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; 

在我的頂級組件：

updateInventory = (e, state) => { 
    let pizzaState = this.state.pizzas; 
    const index = pizzaState.findIndex((pizza)=>{ 
    return pizza.id === state.id; 
    }); 
    Object.assign(pizzaState[index], state); 
    console.log(pizzaState); 
    e.preventDefault(); 
}; 

這似乎到目前爲止是工作（我沒有帶更新了我的頂級狀態還），但我可以看到，當我更新價格新值是一個字符串不是整數。我希望只有一個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 
});