我已經開始學習反應，但卡在這里。我想在網頁中列印值，但無法獲得我應該在 onChange 中輸入什么方法，還需要解釋。
class IncrementDecrement extends React.Component {
constructor(props) {
super(props);
this.state = { a: 0 };
this.change = this.onIncreased.bind(this);
this.change = this.onDecreased.bind(this);
}
change(event) {
this.setState({ a: event.target.value });
}
onIncreased() {
this.state.a = this.state.a 1;
console.log(this.state.a);
}
onDecreased() {
this.state.a = this.state.a - 1;
console.log(this.state.a);
}
render() {
return (
<div>
<input type="number" value={this.state.a} onChange={this.setState} />
<button
onClick={() => {
this.onIncreased();
}}
>
Increment
</button>
<button
onClick={() => {
this.onDecreased();
}}
>
Decrement
</button>
</div>
);
}
}
ReactDOM.render(<IncrementDecrement />, document.getElementById("root"));<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
更改此行
<input type="number" value={this.state.a} onChange={this.setState} />
到
<input type="number" value={this.state.a} onChange={this.change} />
this.change是onChange事件的處理程式，它獲取值并更新狀態。
uj5u.com熱心網友回復：
進行以下更改：
在建構式中正確系結方法。
設定
onChange為this.change和不this.setState。用于更新一個狀態使用
this.setState并且不要改變狀態。并且在該
change方法中，將輸入的值強制為 aNumber以使遞增和遞減操作正常作業。
class IncrementDecrement extends React.Component {
constructor(props) {
super(props);
this.state = { a: 0 };
this.change = this.change.bind(this);
this.onIncreased = this.onIncreased.bind(this);
this.onDecreased = this.onDecreased.bind(this);
}
change(event) {
this.setState({ a: Number(event.target.value) });
}
onIncreased() {
this.setState({ a: this.state.a 1 });
}
onDecreased() {
this.setState({ a: this.state.a - 1 });
}
render() {
return (
<div>
<input type="number" value={this.state.a} onChange={this.change} />
<button
onClick={() => {
this.onIncreased();
}}
>
Increment
</button>
<button
onClick={() => {
this.onDecreased();
}}
>
Decrement
</button>
</div>
);
}
}
ReactDOM.render(<IncrementDecrement />, document.getElementById("root"));<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
嘗試設定onChange={this.change}。您已定義此方法但未使用它，而是將setState其作為事件處理程式傳遞，但事實并非如此。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466110.html
標籤：javascript 反应