反應：onChange不更新輸入字段的值

我正在編寫一個頁面，將溫度從Celcius轉換爲華氏。反應：onChange不更新輸入字段的值

用戶在第一個輸入字段中輸入溫度，然後onChange應該調用函數convertCelciustoFahr。

convertCelciustoFahr通過函數this.setState（）更改state.fahrenheit，並且華氏溫度應該更新爲第二個輸入字段。

class App extends Component { 

constructor(props){ 
    super(props); 
    this.state = { 
    //Temperature in fahrenheit 
    fahrenheit: 0, 
    //Temperature in celcius 
    celcius: 0, 
    }; 
    //Binding 
    this.convertCelciustoFahr = this.convertCelciustoFahr.this; 
} 


//Converts celcius to fahrenheit 
convertCelciustoFahr(event){ 
    var celcius = Number(event.target.value); 
    this.setState(function(state,props){ 
    return{ 
     fahrenheit: (celcius-32)/(5/9), 
    } 
    } 
) 
} 

render() { 
    return (
    <div className="App"> 

    <h1>Celcius to Fahrenheit converter</h1> 
    <form id="conversion"> 
     <input className="Celcius" placeholder="°C" onChange={this.convertCelciustoFahr} /> 
     <p>=</p> 
     <input className="Fahrenheit" value={this.state.fahrenheit} placeholder="°F" /> 

    </form> 
    </div> 
); 
} 
} 


export default App;

下面是HTML：

<body> 
<noscript> 
    You need to enable JavaScript to run this app. 
</noscript> 
<div id="root"> 
<div data-reactroot="" class="App"> 
    <h1>Celcius to Fahrenheit  converter</h1> 
    <form id="conversion"> 
    <input class="Celcius" placeholder="°C"> 
    <p>=</p> 
    <input class="Fahrenheit" value="0" placeholder="°F"> 
    </form> 
</div> 
</div>

看來，JavaScript是沒有啓用，並不會觸發onChange事件。

爲什麼onChange不更新值到華氏輸入字段？

來源

2017-07-03 puolimatkankrouvi

因爲在JSX你通過不括號內的事件處理函數名這是不是這樣的困境。 – puolimatkankrouvi

好像你是對的。 –

使用

this.convertCelciustoFahr = this.convertCelciustoFahr.bind(this);

來源

2017-07-03 14:51:30

-1因爲「*您可以使用箭頭函數，因爲它自動綁定到這個*」是錯誤的。箭頭函數不會「綁定」，因爲它們沒有'this'。 – Chris

嗨@Chris是的，你是對的我沒有解釋它的權利，所以我更新了我的答案:)它應該是箭頭fucntions綁定到他們當前的上下文的詞彙 –

我做到了，現在它的工作。謝謝。 – puolimatkankrouvi

反應：onChange不更新輸入字段的值

回答

相關問題