Question

我想在html输入元素中添加或删除属性。

我做的是：

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

渲染功能：

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

如你所见，我想设置＆＃34; readOnly＆＃34;输入元素的属性。但现在我得到一个错误：

未知道具0，1，2，3，4，5，6，{{1在标签上。从元素中删除这些道具

当用户点击输入元素时，它应该可以编辑，所以我想动态地更改这个属性。

但我怎么能这样做？

Answer 1

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

检查此示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

请改为尝试：

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

Answer 3

你可以试试这个。

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

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

更改input元素的readonly属性：ReactJS

3 个答案: