使用 Reactstrap 进行简单的样式设置,我正在使用他们的<Input>
组件,并且已经构建了表单,但它不允许文本输入。控制台在输入字段时抛出此错误:
我有组件设置,表单的其余部分工作正常:
constructor(props) {
super(props);
this.state = {
firstName: "",
preferredName: "",
middleName: "",
lastName: "",
address1: "",
address2: "",
city: "",
state: "",
zip: "",
maxContacts: 5,
currentContacts: 0,
releaseDate: Date.now(),
gender: "M",
institutionId: "",
country: "US",
areaCode: 1,
language: "EN",
contacts: []
};
this.onChange = this.onChange.bind(this);
}
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
let prependStyle = {
fontSize: "2pt",
fontFamily: "monospace"
};
在渲染内部,我设置了一些基本样式,供以后在组件中使用。这是 JSX 中在组件中表现得很有趣的部分:
<InputGroup>
<InputGroupAddon addonType="prepend" style={prependStyle}>
Institution ID
</InputGroupAddon>
<Input
type="text"
value={this.state.institutionId}
name="instituitonId"
onChange={this.onChange}
/>
</InputGroup>
为什么会这样?(编辑以获取更多信息没有问题。)这是表单中唯一不更新呈现页面上的输入的字段,虽然有一个日期字段,但它被正确地封闭在这个元素之外。
考虑使用 moment.js 将您的时间转换为组件需要的有效时间格式
所以你releaseDate
会像
formattedReleaseDate = moment(this.state.releaseDate, 'YYYY-MM-DD');
你想把它放在你的渲染函数中。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句