无法使用 React Js 处理文本框答案

【问题标题】：Unable to handle texbox using Reactjs无法使用 React Js 处理文本框
【发布时间】：2022-11-23 19:12:56
【问题描述】：

我在 Reactjs 中工作并使用 Nextjs，我面临“文本框”的问题，每当我在文本框中使用“值”时，我就无法在“文本框”中键入任何内容，如果我在“文本框”中使用“默认值”，那么我就是收到验证消息“请输入您的电子邮件” 我怎样才能解决这个问题？这是我的代码

<input
 type="text"
 name="email"
 id="email"
 placeholder="Type your email here"
 value={state.name}
 onChange={handleChange2}
 />

这里如果 nextjs 代码

const value = e.target.value;
    setState({
      ...state,
      [e.target.email]: value
    });
  };
  const handleSubscribe = (e) => {
    e.preventDefault();
    if (state.email == '') {
      //showing error message
    } else {
      //further code
    }
  };

【问题讨论】：

你想达到什么目的？
我想使用 API（用户输入他的电子邮件后订阅）
看起来值应该是 value={state.email}
@Azzy：不工作
请添加您的handleChange2功能代码

标签： javascript reactjs next.js

【解决方案1】：

这可以工作，最小的例子来重现

input prop
name => name="email"
// set state with [e.target.name]
setValue({ ...value, [e.target.name]: e.target.value  })

const [value, setValue] = React.useState({})

  return (
    <form onSubmit={e => {
      e.preventDefault();
      alert('Submitting!');
    }}>
      <input
       name="email"
        value={value.email}
        onChange={(e) =>setValue({ ...value, [e.target.name]: e.target.value  })}
         />
      <button>Send</button>
    </form>
  );

希望能帮助到你

【讨论】：

【解决方案2】：

只需这样做：

const [value, setValue] = useState({});

const handleOnChange = (event) => {
  setValue({...value, [event.target.name]: event.target.value});
}

return (
  <form onSubmit={e => {
    e.preventDefault();
    alert('Submitting!');
  }}>
    <input
      name="email"
      value={value.email}
      onChange={handleOnChange}
    />
      <button>Send</button>
    </form>
);

【讨论】：