改变input元素的readonly属性：ReactJS

Question

我希望能够在html输入元素中添加或删除属性。

我所做的是这样的:

constructor(props) {
    super(props);
    this.state = {inputState: 'readOnly'};
}

还有渲染函数：

<input className="form-control" type="text" value={floor} {...this.state.inputState} />

如您所见，我想在输入元素上设置 "readOnly" 属性。但现在我收到一个错误消息，上面写着：

在标记为 tag 的元素上出现了未知属性 0, 1, 2, 3, 4, 5, 6, 7，请将这些属性从元素中删除。

当用户点击输入元素时，它应该变为可编辑的，所以我想要动态更改此属性。

但是我该怎么做呢？

- user6691398

---

如果你真的想要传播状态，只需这样做：<input className="form-control" type="text" value={floor} {...this.state} /> - Hemerson Carlin

Answer 1

控制元素的模式，定义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'/>

- Mayank Shukla

Answer 2

试一下这个：

this.state = { inputState: { readOnly: true }};

- An Nguyen

Answer 3

你可以试试这个。

constructor(props) {
    super(props);
    this.state = {readOnly: true};
}

render() {
    return (<input className="form-control" type="text" value={floor} readOnly={this.state.readOnly} />)
}

- bennygenel