React componentWillMount setState在输入中没有显示状态值
React componentWillMount setState in input no showing state value
我是React的新手,在输入或状态设置方法中遇到了一些defaultValue问题。说明这一点的代码示例:https://jsfiddle.net/4gxqw5c5/
我预计,1-2示例中的输入将具有默认值,但他显示了占位符值。如果您检查输入,您将看到哪些值已填充,但未显示。在示例3中,我使用值属性,输入显示实际值。我做错了什么?
代码示例:
const counter = (state = 0, action) => {
switch(action.type) {
case 'ACTION':
return state + 1;
default:
return state;
}
}
class Counter extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
componentWillMount() {
this.props.some()
this.props.some()
this.props.some()
this.props.some()
this.props.some()
this.props.some()
this.setState({
textValue: this.props.value
})
}
componentWillReceiveProps(nextProps) {
console.log('props', nextProps)
this.setState({
textValue: this.props.value
})
}
render() {
console.log('render with: ',this.state.textValue)
return (
<div>
<b>1.</b> Bootstrap defaultValue: <br/>
<ReactBootstrap.FormControl
name="text"
placeholder="Enter Text"
maxLength="250"
defaultValue={this.state.textValue}
required
/> <hr />
<b>2.</b> Input defaultValue: <br/>
<input type="text" defaultValue={this.state.textValue} /> <hr />
<b>3.</b> Input value: <br/>
<input type="text" value={this.state.textValue} />
</div>
);
}
}
const {createStore} = Redux;
const store = createStore(counter); // bind reducer
const render = () => {
ReactDOM.render(
<Counter
value={store.getState()}
some={() => {
setTimeout(() => store.dispatch({type: 'ACTION'}), 100)
}} />,
document.getElementById('root')
);
};
store.subscribe(render);
render(); // inital render
很抱歉问了这个愚蠢的问题,在官方文档中找到了答案:)https://facebook.github.io/react/docs/forms.html#controlled-组件
相关文章:
- 使用按钮和媒体查询切换显示状态
- 显示服务工作者状态的消息
- jQuery隐藏元素在使用CSS显示时保持隐藏状态
- 如何在状态输入ui路由器时立即显示模板,然后当承诺被解决时显示数据
- 在弹出窗口中显示状态
- 如何在 jquery 中的速率按钮下方显示消息状态
- 使用codehelper.io显示基于IP位置的状态缩写
- 这个预加载器工作吗?它不用于显示状态,只是加快了以后可能的图像加载速度
- 如何在ui路由器的父模板中显示状态
- 获取受 .slideToggle() 影响的显示状态元素
- 自动对焦属性在 Firefox 中因显示状态更改而不起作用
- 角度 SPA 未显示状态激活的 API 数据
- 如何在iOS UIAutomation中获取按钮突出显示状态
- Javascript图像预加载程序没有't显示状态
- 使用jQuery切换显示状态
- 如何启用窗口.在弹出窗口中显示状态
- 如何解决选择国家时动态显示状态的问题
- 这是在asp.net中显示状态消息的最佳方式
- 切换可见性-显示/隐藏-切换时保持显示状态
- 使用jQuery/Ajax/JS加载PHP文件和显示状态的正确或最佳过程