我想从html输入元素中添加或删除属性。
我完成的是:
constructor(props) { super(props); this.state = {inputState: 'readOnly'}; }
和render函数:
<input className="form-control" type="text" value={floor} {...this.state.inputState} />
如您所见,我要在输入元素上设置“ readOnly”属性。但是现在我得到一个错误,它说:
未知的道具0,1,2,3,4,5,6,7上标签。从元素中移除这些道具
0
1
2
3
4
5
6
7
当用户单击输入元素时,它应该变得可编辑,因此我想动态更改此属性。
但是我该怎么办呢?
要使用它控制input元素定义readOnly属性的模式并通过状态变量控制其值,每当您更新状态值时,react都会重新渲染组件,并且会根据状态值更改模式。
input
readOnly
检查以下示例:
class App extends React.Component{ constructor(){ super(); this.state = {readOnly: true} this._click = this._click.bind(this); } _click(){ this.setState(prevState => ({readOnly: !prevState.readOnly})) } render(){ return <div> <input readOnly={this.state.readOnly}/> <button onClick={this._click}>Toggle</button> </div> } } ReactDOM.render(<App/>, document.getElementById('app')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app'/>