Question

我有两个＆lt; select＆gt;投入。我想将属性设置为“禁用”其中一个来自另一个＆lt; select＆gt;的特定值选项。第一个是：＆lt; select ref =“selectOption”＆gt; ＆lt; option selected value =“1”＆gt;选项1＆lt; / option＆gt; ＆lt; option value =“2”＆gt;选项2＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; select ref =“selectTime”disabled = {this.state.disabled}＆gt; ＆lt; option value =“a”＆gt; January＆lt; / option＆gt; ＆lt; option value =“b”＆gt; Febreaury＆lt; / option＆gt; ＆LT; /选择＆GT; 所以，我的想法是设置第二个＆lt; select＆gt;的状态。如果第一个＆lt; select＆gt;中的选项值= 2，则为false 我该怎么做？还是有另一种方法没有反应我能做到吗？还是用道具？我很困惑。我尝试过这样的事情： var option = ReactDom.findDOMNode（this.refs.selectOption）.value; if（option =='2'）this.setState（{disabled：true}）; 但它不起作用。试图把它放在componentDidUpdate中但是当我从select中选择一个新值时组件没有更新，所以这不起作用。想法请。编辑：我也有jquery这个解决方案，但我想使用Reactjs。 $（'＃selectOption'）。change（function（）{ $（'＃selectTime'）。prop（'disabled'，false）; if（$（this）.val（）=='2'）{ $（'＃selectTime'）。prop（'disabled'，true）; } }）我对如何使用ReactDom.findDOMNode（this.refs.selectOption）而不是jquery选择器感到困惑

Answer 1

这将是实现这一目标的反应方式：

export default class Test extends Component{

  constructor(props) {
    super(props)

    this.state = {
      selectOptionValue: '1'
    }
  }

  handleOnChange = (e) => {
    this.setState({
      selectOptionValue: e.target.value
    })
  }

  render(){
    return (
      <div>
        <select defaultValue = "1" onChange={this.handleOnChange}>
          <option value="1" >Option 1</option>
          <option value="2" >Option 2</option>
        </select>

        <select  disabled={ this.state.selectOptionValue === '2' }>
          <option value="a" >January</option>
          <option value="b" >Febreaury</option>
        </select>
      </div>
    )
  }
}

Answer 2

以下是如何完成此操作的最小示例，根据值为事件处理程序中的第一个选择onChange添加setState事件处理程序：

handleChange(event) {
    let value = event.target.value;
    this.setState({
        disabled: value == '2'
    });
}
render() {
    return (
        <div>
            <select ref="selectOption" onChange={(e) => this.handleChange(e)}>
               <option selected value="1" >Option 1</option>
               <option value="2" >Option 2</option>
            </select>

            <select ref="selectTime" disabled={this.state.disabled}>
               <option value="a" >January</option>
               <option value="b" >Febreaury</option>
            </select>
        </div>
    )
}

Answer 3

如果您想保持简单并使用纯javascript，则可以使用以下代码段。

document.querySelector('select[ref="selectOption"]').addEventListener('change', function(e) {
  document.querySelector('select[ref="selectTime"]').disabled = (e.target.value === '2') ? true : false;
})

<select ref="selectOption">
  <option selected value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<select ref="selectTime">
  <option value="a">January</option>
  <option value="b">Febreaury</option>
</select>

Answer 4

来自this的onChange活动怎么样？为方便起见：

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite La Croix flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Answer 5

这是定义需要设置哪个状态变量的另一种方法。

state = { someStateVariable : "" }

render() {
    return (
        <select onChange={event => this._setSelected({ someStateVariable: event.target.value })}>
            <option value="1">One</option>
            ...
        </select>
    );
}

_setSelected = newState => {
    this.setState(newState)
}

Answer 6

步骤 1 - 创建状态并将初始值设置为空字符串

      const [category,setCategory] = useState('');

第 2 步映射您的选项并检查选项值中的 id === 选择值，然后将 selected 设置为 true

  const renderedResults = results.map((result) => {
    const selected = category === result.id ? "true" : '';
    return (
      <option selected={selected} key={result._id} value={result._id}>{result?.name}</option>
      );
  });

第三步

 <select
   onChange={(e) => {
    setCategory(e.target.value);
   }}
   className="form-select"
   aria-label={"Default select example"}
   >
   <option value="">Select a category</option>
     {renderedResults}
 </select>

更改<select>上的值时的setState

6 个答案: