管理输入的 onChange

Question

我正在开发一个 ReactJS 应用程序，其中有一个 JSON 来自数据库并存储在 Redux 存储中。

{
  prodName: "Name",
  quantity: 5
}

使用此对象的数量属性，我在屏幕上呈现输入，如下所示。

<input type="number" value=quantity onChange={this.handleQuantityChange} />

此处使用 handleQuantityChange：

handleQuantityChange(event) => {
  if(event.target.value > 0) updateQuantity(event.target.value);
}

updateQuantity() 函数触发一个动作并更新数据库中的数量，从而更新 JSON，从而在屏幕上呈现更新后的数量。
到这里一切都很好。

问题是，我无法在输入一位数字后更新数量。就像在这个例子中，我可以把这个数量从 5 变成 51、52、53 或 510 或 5200 等等，但我不能把它变成 6 或 7 或 2。

这是因为 if condition 在 handleQuantityChange 函数中给出，但我无法删除条件，因为 API 会抛出错误在发送 NaN 或 0 值时。
还尝试将此数量存储在组件的 localState 中，但随后数据库值和输入值彼此不同步，为了更新数量，我们只发生了一个 onChange 事件。
关于如何管理此 onChange 函数的任何方法。
提前致谢。

Answer 1

看看下面的实现：

const data = {
  prodName: 'Name',
  quantity: 5
};

const App = () => {
  const [value, setValue] = React.useState(data.quantity); // GET INITIAL VALUE FROM GLOBAL STATE

  // THIS WAY YOU MAKE THE INPUT A "CONTROLLED INPUT"
  const onChangeHandler = React.useCallback((e) => {
    setValue(e.target.value);
  }, []);
  
  React.useEffect(() => {
    const quantity = parseInt(value);
    
    if (quantity) {
      // UPDATE DATABASE HERE!
      console.log('NEW VALUE', quantity);
    }
  }, [value])

  return (
    <input type={'number'} value={value} onChange={onChangeHandler} />
  );
};

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id='root'></div>

管理输入的 onChange

Manage onChange on input

html

javascript

onchange

reactjs