我正在我的React App中创建一个日期选择器字段。
import React, { Component } from 'react'
...
DateInput.propTypes = {
type: oneOf(['date']),
placeholder: string.isRequired,
maxLength: string,
disabled: bool,
}
export default DateInput
我this.change像其他领域一样尝试过，但这也不起作用。
如何在状态中更新新值？
如果要让DateInput反映其父组件（this.state.age）的状态，则必须以某种方式使DateInput显示this age。
这是通过使用道具来完成的。
由于DateInput是普通输入元素的包装，因此您应该使用valueand onChange（不是change）道具：
render() {
let {
...
...
age,
...
} = this.state
...
...
//date of birth
let stringAge = age.toString()
stringAge = stringAge.substring(0, 4) + '-' +
stringAge.substring(4, 6) + '-' +
stringAge.substring(6, 8)
...
<DateInput
type="date"
value={age}
onChange={this.changeDOB}
placeholder={stringAge}
className="datePicker"
/>
}
这就是所谓的“受控”输入。只要有可能，应使React组件“纯净”，这纯粹是其props的功能。
同样，changeDOB处理程序应绑定到组件实例，否则this将不是您期望的那样，并且this.setState(...)调用将失败。
这可以在构造器中完成（很无聊，但更好*）：
contructor(props) {
super(props);
this.changeDOB = changeDOB.bind(this);
}
或在定义方法时（方便但有警告**）：
changeDOB = () => {
this.setState({ age: document.getElementByClassNames("datePicker").value })
}
或将处理程序连接到道具时（损坏***）：
<DateInput
type="date"
value={age}
onChange={() => this.changeDOB()}
placeholder={stringAge}
className="datePicker"
/>
在这里，DateInput是一个受控制的组件（由其道具控制，因此受其父控件控制），在显示（年龄）和行为（onChange）上均如此。
父组件成为子组件的控制器。这种思维方式在React中无处不在。
（*这是最标准，最高效的方法）
（**在智能感知方面，某些IDE不喜欢此功能）
（***这是一个性能问题，因为它在每次渲染期间都会为prop的值生成新的实例）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句