TA貢獻1875條經(jīng)驗 獲得超3個贊
如果您使用 React 和函數(shù)式組件，它看起來會像這樣。您只需將輸入存儲在狀態(tài)中，并在輸入更改時更新狀態(tài)。
function Component () {
const [input, setInput] = useState(0);
const handleInputChange = (e) => {
setInput(e.target.valueAsNumber || e.target.value);
console.log(e.target.valueAsNumber || e.target.value);
}
return (
<input type="number" value={input} onChange={handleInputChange} required pattern="[0-9]*[.,][0-9]*"/>
<h4>Data : {input}</h4>
)
}
TA貢獻1817條經(jīng)驗 獲得超6個贊
您需要通過以下方式跟蹤它進入狀態(tài)
const [number, setNumber]=useState()
let inputNumber = 0;
handleInputChange(e) {
inputNumber = e.target.value;
setNumber(inputNumber);
}
<input type="number" onChange={this.handleInputChange} required pattern="[0-9]*[.,][0-9]*"/>
<h4>Data : {number}</h4>
TA貢獻1765條經(jīng)驗 獲得超5個贊
如果您使用類組件，請將您的 inputNumber 存儲在state
constructor(props) {
super(props);
this.state = { inputNumber: 0 };
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(e) {
this.setState({ inputNumber: e.target.value });
}
render() {
return (
<div>
<input
type="number"
value={this.state.inputNumber}
onChange={this.handleInputChange}
required
pattern="[0-9]*[.,][0-9]*"
/>
<h4>Data: {this.state.inputNumber}</h4>
</div>
);
}
用于演示的代碼沙箱
舉報