时间戳

首页 > 解决方案 > 当我单击按钮并更新输入 React 的 de 值时如何在输入中调用事件 onChange

reactjs - 当我单击按钮并更新输入 React 的 de 值时如何在输入中调用事件 onChange

问题描述

我试图创建一个具有输入类型编号的组件，但是当我的值更改时出现问题，未调用输入的事件 onChange，我该如何解决这个问题？因为我必须将新值传递给父组件。我的代码

//My Component
import React, { useState } from 'react';
import { AddCircle, RemoveCircle } from '@material-ui/icons'

import './inputnumber.css'
function InputNumber({ defaultValue, onClick, value, onInputChange }) {
    const [Value, setVal] = useState(value|| 1)
    function updateValue(value){
        setVal(value)
        return onInputChange(value)
    }
    function  IncrementValue(){
        setVal(Value + 1)
     
    }
    function DecrementValue(){
        setVal(Value - 1)
    }
    return (
        <div className='inputNumber-Container'>
            <AddCircle onClick = {() => IncrementValue()}  className='input-number-button'></AddCircle>
            <input type='number' value = {Value} id = 'inputvalue'  onChange = {(e) => updateValue(e.target.value)} ></input>
            <RemoveCircle onClick = {() => DecrementValue()} className='input-number-button'></RemoveCircle>
        </div>
    )
}

export default InputNumber;

当我使用输入并手动更改值时，它的工作原理，但是当我尝试使用按钮时，我的值会正常更新，但 onChange 事件不会将更新的值传递给父组件。

标签： reactjs

解决方案

你有一个 localValue和一个valuefrom 道具。您的代码现在不起作用，因为您没有调用onInputChange从您的IncrementValue和DecrementValue处理程序更新父状态。您只能onInputChange从事件的updateValue处理程序中调用input onChange。

在 state 中复制 props 不是一个好主意，因为它会导致像这样的不同步值。您应该删除本地值状态并仅依赖父值。这就是我们所说的“受控组件”，因为它不管理自己的任何状态。

而不是调用setVal你的增量和减量处理程序，你应该调用onInputChange来更新父状态。

function InputNumber({ defaultValue = 1, value, onInputChange }) {
  function updateValue(value) {
    onInputChange(value);
  }
  function IncrementValue() {
    onInputChange(value + 1);
  }
  function DecrementValue() {
    onInputChange(value - 1);
  }
  return (
    <div className="inputNumber-Container">
      <AddCircle
        onClick={() => IncrementValue()}
        className="input-number-button"
      />
      <input
        type="number"
        value={value ?? defaultValue}
        id="inputvalue"
        onChange={(e) => updateValue(e.target.value)}
      />
      <RemoveCircle
        onClick={() => DecrementValue()}
        className="input-number-button"
      />
    </div>
  );
}

当然，这些处理程序很简单，您可以将它们内联编写。

function InputNumber({ defaultValue = 1, value, onInputChange }) {
  return (
    <div className="inputNumber-Container">
      <AddCircle
        onClick={() => onInputChange(value + 1)}
        className="input-number-button"
      />
      <input
        type="number"
        value={value ?? defaultValue}
        id="inputvalue"
        onChange={(e) => onInputChange(e.target.value)}
      />
      <RemoveCircle
        onClick={() =>  onInputChange(value - 1)}
        className="input-number-button"
      />
    </div>
  );
}

推荐阅读