Question

我已经用React钩子和useState重构了一个表单，但是我无法触发输入标签的onChange提供的handleChange函数。这是代码： useState方法

setMyCityList(response.data.cities)

handleInputChange方法

const [data, setData] = useState({
    newDate: '',
    startTime: '',
    endTime: '',
});

const { newDate, startTime, endTime } = data;

表格形式的输入

const handleInputChange = (e) => {
    console.log('Inside handleChange');
    setData({ ...data, [e.target.name]: e.target.value });
};

onSubmit方法和除此以外的所有方法都可以正常工作，但是输入onChange方法未触发。我在这里到底在做什么错，我该如何解决？

Answer 1

代码看起来还不错，您正在使用controlled components和计算出的属性名称来动态更新每个输入值。也许某处有错字？另外，我还要仔细检查handleInputChange是否在主要功能组件内部。

基于您的代码的工作示例：

function App() {
  const [data, setData] = React.useState({
    newDate: "",
    startTime: "",
    endTime: ""
  });

  const handleInputChange = e => {
    setData({ ...data, [e.target.name]: e.target.value });
  };
  const { newDate, startTime, endTime } = data;
  return (
    <div>
      <input
        style={styles.input}
        type="date"
        name="newDate"
        value={newDate}
        className="datepicker"
        onChange={handleInputChange}
      />

      <input
        style={styles.input}
        type="time"
        required
        name="startTime"
        value={startTime}
        onChange={handleInputChange}
        className="timepicker"
      />

      <input
        style={styles.input}
        type="time"
        required
        name="endTime"
        value={endTime}
        onChange={handleInputChange}
        className="timepicker"
      />
      {JSON.stringify(data)}
    </div>
  );
}

const styles = {
  input: {
    margin: "20px auto",
    width: "40%",
    display: "block",
  }
};

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

注意：我根据您收集的数据添加了特定的<input> types。

Answer 2

<input type="text" name="newDate" value={newDate} className="datepicker"
placeholder="Meeting Date" onChange={(e) => handleInputChange(e)} />

奇怪，试试这个。

Answer 3

就我而言，它是附加到 window 和 e.preventDefault() 的全局处理程序阻止了 onChange。

因此，如果您带着不工作的 onChange 处理程序来到这里 - 您可能想要检查是否有任何处理程序。

ReactJS onChange函数在输入时不触发

3 个答案: