如何在JavaScript中将事件值传递至React状态？

你只需要利用onChange事件的事件对象获取输入值，再调用状态更新函数即可，具体有两种常用写法：

方式一：单独定义处理函数（更易维护，适合复杂逻辑） #

import { useState } from 'react';

function YourComponent() {
  const [business, setBusiness] = useState('Value should be entered here');

  const handleInputChange = (e) => {
    // 通过事件对象e的target属性拿到输入框当前值
    setBusiness(e.target.value);
  };

  return (
    <input 
      placeholder="Search Businesses" 
      value={business} // 绑定state到输入框value，实现双向同步
      onChange={handleInputChange}
    />
  );
}

方式二：内联函数（简洁，适合简单场景） #

import { useState } from 'react';

function YourComponent() {
  const [business, setBusiness] = useState('Value should be entered here');

  return (
    <input 
      placeholder="Search Businesses" 
      value={business}
      onChange={(e) => setBusiness(e.target.value)} // 直接在事件里更新状态
    />
  );
}

关键说明 #

• 把business绑定到input的value属性后，输入框会和state保持同步，这是React里的受控组件，也是处理表单输入的标准做法
• e.target.value是获取输入框当前内容的核心，e是触发onChange时的事件对象

内容的提问来源于stack exchange，提问作者André Silveira