Question

我正在尝试确保在搜索条件表单中仅填充一个字段。当输入触发onblur事件时，我想检查表单中的其他字段，如果它们与当前输入引用名称不匹配，则将其清除。

在功能组件中，如何迭代所有可用的引用我看到这可以通过类组件实现： Iterate over all refs values in component

但是，有一种方法可以对功能组件进行此操作。如何修改下面的clearFields函数...还如何从事件中获取当前字段的引用：

以下是一些示例代码：

    const ipInput = useRef(null)
    const typeInput = useRef(null)

    const clearFields = e => {

        for (var ref in this.refs) {
            if e.current.ref !== this.refs[ref]
            this.refs[ref].value = ''
        }

      }

    <Input
    type='text'
    id='IP'
    name='IP'
    innerRef={ipInput}
    onChange={e => handleChange('PK', e)}
    onBlur={e => clearFields(e)}
    placeholder='Enter IP'
    />


    <Input
    type='select'
    id='type'
    name='type'
    innerRef={typeInput}
    onChange={e => handleChange('type', e)}
    onBlur={e => clearFields(e)}
    placeholder='Enter Type'
    >
    <option value=''>Select a Type</option>
    {typesList.map((item, index) => {
    return (
    <option key={item.type} value={item.type}>
      {item.type}
    </option>
    )
    })}
    </Input>

我尝试了上面的代码示例，但是没有用。我不知道该怎么办。

反应：迭代功能组件中的所有引用

0 个答案: