javascript 如何array.map根据React中的输入值有条件地www.example.com?

9wbgstp7  于 2023-02-18  发布在  Java
关注(0)|答案(1)|浏览(136)

模态屏幕有三个输入:两个下拉框和一个文本输入框。2当第二个下拉框为“是空的”时,文本输入框应该消失,在模态上留下两个输入。
下面是不带任何条件格式的代码:

render () {
   const { filterInputs = [] } = this.props;

   filterInputs.forEach((filterInput, i) => {
      this[`filter`] = React.createRef();
   });
   const filteredLevels = filterInputs.map((filterInput, i) => (
     <div className = “align-items-center” key = {i}>
       <InputElement {…filterInput.field} onChange = {this.onFilterChange} />
       <InputElement {…filterInput.operator} onChange = {this.onFilterChange} />
       <InputElement {…filterInput.operand} onChange = {this.onFilterChange} refInst={this[`filter`]} />
   ));

return (
   <Fragment>
      <{filteredLevels}
   </Fragment>

filterInput.operand是根据filterInput.operator的值是否为“is Empty”而需要消失的字段。我尝试添加一个useState钩子,以便在filterInput.operator.value === 'is Empty'时禁用filterInput.operand,但它没有禁用任何内容,并且由于某种原因,它使filterInput.field中断,我无法选择它的任何下拉选项。

kcugc4gi

kcugc4gi1#

const [disableOperand, setDisableOperand] = useState(false);

render () {
   const { filterInputs = [] } = this.props;

   filterInputs.forEach((filterInput, i) => {
      this[`filter`] = React.createRef();
   });
   const filteredLevels = filterInputs.map((filterInput, i) => (
     <div className = “align-items-center” key = {i}>
       <InputElement {…filterInput.field} onChange = {this.onFilterChange} />
       <InputElement {…filterInput.operator} onChange = {(event) => { if (event.target.value === 'is Empty') { setDisableOperand(true) } else { setDisableOperand(false) } }} />
       <InputElement {…filterInput.operand} disabled={disableOperand} onChange = {this.onFilterChange} refInst={this[`filter`]} />
   ));

return (
   <Fragment>
      <{filteredLevels}
   </Fragment>

在这里,我为filterInput.operand的禁用值添加了一个useState钩子,还为filterInput.operator添加了一个onChange事件,这样当它的值为“is Empty”时,它会将disableOperand设置为true,然后禁用filterInput.operand。

相关问题