DateTimeピッカーを作成するためにMaterial-UIを使用します。これが私のデモコードです。
現在選択されている値を確認するためにconsole.log関数に追加しましたhandleChange。ただし、DatTimeピッカーを使用しても値は変わりません。
handleChange = name => event => {
const target = event.target;
const name = target.name;
console.log("plannedDep", this.state.plannedDep)
this.setState({
[name]: event.target.value
});
};
状態値をデフォルト値としてplannedDepに追加しました。 value={this.state.plannedDep}
onChangeを次のように変更しました：onChange={(event) => this.handleChange("plannedDep", event)}。コードをonChange={this.handleChange("plannedDep")}実行すると、コンポーネントがマウントされるとすぐにonchangeが発生し、状態/プロパティが変更されるたびに不要なレンダリングが発生します。
<TextField
id="datetime-local"
label="Next appointment"
type="datetime-local"
onChange={(event) => this.handleChange("plannedDep", event)}
value={this.state.plannedDep}
className={classes.textField}
InputLabelProps={{
shrink: true,
}}
/>
handleChange = (name, event) => {
const target = event.target; // Do we need this?(unused in the function scope)!
this.setState({
[name]: event.target.value
}, () => {
console.log(this.state.plannedDep)
// Prints the new value.
});
};
これで問題が解決することを願っています:)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加