javascript - 禁用 React Js 中的某个元素

Question

我是 React Js 的新手，我想根据条件设置禁用某些元素

我的表单中有三个元素，一个选择，两个输入

根据所选项目，必须禁用输入之一

这是我的组件代码:

class AddUser extends React.Component {

constructor(props) {
super(props);

this.state = {
user: {
}

};

}

render() {
    if (this.props.user) {
        this.state.user= this.props.user;
    }    

return (

        <div className="form-group">
            <label className="control-label">type<span className="symbol required"></span></label>
            <select className="form-control" name="CompanyMeetingType" value={this.state.user.type>
                <option value="1"> type1</option>
                <option value="2">type2</option>
                <option value="3">both</option>
            </select>
        </div>

        <div className="form-group">
            <label className="control-label">type1(%)<span className="symbol required"></span></label>
            <input required type="text" name="type1" className="form-control" disabled={this.state.user.type ==2} />
        </div>

        <div className="form-group">
            <label className="control-label">type1(%)<span className="symbol required"></span></label>
            <input required type="text" name="type2" className="form-control" disabled={this.state.user.type ==1} />
        </div>
)

}

当我更改所选项目时，禁用功能正常工作，但当我在编辑模式下归档选择元素时，禁用功能不起作用

Answer 1

class Application extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        value: '1'
    }
    this.handleSelect = this.handleSelect.bind(this);
}
handleSelect(e) {
    console.log('enter');
    this.setState({
        value: e.target.value
    })
}
render() {
    console.log(this.state.value)
    return ( 
      <div >
        <select value = { this.state.value} onChange = {this.handleSelect} >
         <option value = "" >select value </option>
         <option value = "1" >value 1 </option>
         <option value = "2" >value 2 </option>
         <option value = "3" >both </option>
         </select> 
         <br / >
        <hr / >
        <input type = "text" disabled = {this.state.value == 1 || this.state.value == 3 }/>
        < br / > < br / >
        < input type = "text" disabled = { this.state.value == 2 || this.state.value == 3 }/> 
      < /div>
     );
    }
  }
React.render( < Application / > , document.getElementById('app'))

您唯一缺少的是handleSelect 函数，它处理选择值事件并设置状态。它按照你想要的方式完美工作。如果您想预先默认禁用任何输入标记，则只需在状态中传递该值，以便当组件呈现该标记时将被禁用。