返回 TextField 中的默认值答案

【问题标题】：Return the default value in the TextField返回 TextField 中的默认值
【发布时间】：2022-08-17 00:36:05
【问题描述】：

我的网站上有几个过滤器（按日期、持续时间等）。相应地，从大量的数据中，用户可以找到自己需要的东西

还有一个“重置所有过滤器”按钮，用于重置所有过滤器并返回完整的产品列表。

但是，使用其中一个过滤器时，我遇到了一个问题：在这个过滤器中，我使用了来自 mui 的 TextField。问题在于过滤所需产品的值本身被丢弃，而用户在字段中输入的内容保持不变。

我举个例子：用户只按这个字段过滤。收到任何结果后，他想返回原始列表并按下“重置所有过滤器”按钮。重置所有过滤器并返回原始列表，但字段中输入的数据仍然存在，即字段本身没有被清除。

帮助解决问题

    const MAX_DURATION = 9999999 

export default function FilterDurationResponse() {
  const { filters, setFilters } = useContext(AppContext)
  const [minDuration, setMinDuration] = useState(0);
  const [maxDuration, setMaxDuration] = useState(MAX_DURATION);

  useEffect(() => {
    var updatedFilters = { ...filters }
    updatedFilters.durationRange = { min: minDuration, max: maxDuration }
    setFilters(updatedFilters)
    if (maxDuration === 0) {
      setMaxDuration(MAX_DURATION)
    }
  }, [minDuration, maxDuration])

  return (
      <div style={{ display: \'flex\', justifyContent: \'space-between\' }}>

        <div style={{ width: \"120px\" }}>
          <TextField
            type=\'number\'
            size=\"small\"
            margin=\"dense\"
            label=\"From\"  
            onInput={(e) => {
              e.target.value = Math.max(0, parseInt(e.target.value)).toString().slice(0,7)
              const newValue = Number(e.target.value)
              if (newValue <= maxDuration && newValue >= 0 && newValue <= MAX_DURATION)
                setMinDuration(newValue)


            }} />
        </div>

      </div>

  );
}

此外，该组件转到调用 resetAll 并设置 defaultFilters 的父组件

const resetAll = () => { setFilters(defaultFilters) };


export const defaultFilters = {
    durationRange: { min: 0, max: 9999999 },

}

标签： javascript reactjs material-ui

【解决方案1】：

您希望 TextField 的值由组件的状态管理。添加value 属性并将其设置为minDuration 的当前值：

<TextField
    ...
    value={minDuration}
/>

【讨论】：

【解决方案2】：

将 value 属性添加到您的 TextField 中，其中 minDuration 如下所示：

          <TextField
            type='number'
            size="small"
            margin="dense"
            label="From"
            value={minDuration}
            onInput={(e) => {
              e.target.value = Math.max(0, parseInt(e.target.value)).toString().slice(0,7)
              const newValue = Number(e.target.value)
              if (newValue <= maxDuration && newValue >= 0 && newValue <= MAX_DURATION)
                setMinDuration(newValue)


            }} />

【讨论】：