更改输入元素的只读属性：ReactJS

小编典典

更改输入元素的只读属性：ReactJS

reactjs

我想从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上标签。从元素中移除这些道具

当用户单击输入元素时，它应该变得可编辑，因此我想动态更改此属性。

但是我该怎么办呢？

阅读 776

2020-07-22

共1个答案

小编典典

要使用它控制input元素定义readOnly属性的模式并通过状态变量控制其值，每当您更新状态值时，react都会重新渲染组件，并且会根据状态值更改模式。

检查以下示例：

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'/>

2020-07-22