尝试拥有多个输入元素

Question

但是当我使用句柄输入更改功能时，它会擦除整个对象并用一个属性

替换它

另外，如果有人可以帮我重置表单数据？因为我将状态设置为初始状态值，但文本字段没有被擦除。

const initialState = {
  name: '',
  number: '',
  message: '',
  email: '',
  messageSent: false,
};

//State After typingState
{email: "2"}

我使用的是基于 class 的组件，它工作正常，我切换了，现在我在提交时得到了一个属性而不是 4 我希望句柄更改更改特定的属性而不是整个对象离开 React 一段时间，不确定要 google 修复此问题。尝试过处理多个输入功能组件 React 等..

 let handleInputChange = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    setstate({
      [name]: value,
    });
  }
    return (
      <section
        id="contact-form"
        className={
         GrayBg === true
            ? 'contact-form-area_3'
            : 'contact-form-area_3  contact-page-version'
        }
      >
        <div className="container">
          <div className="section-title mb45 headline text-center">
            <span className="subtitle text-uppercase">Send us a message</span>
            <h2>
              Send Us A<span> Message.</span>
            </h2>
          </div>

          <div className="contact_third_form">
            <form
              className="contact_form"
              encType="multipart/form-data"
              onSubmit={ sendEmail}
            >
              <div className="row">
                <div className="col-md-4">
                  <div className="contact-info">
                    <input
                      className="name"
                      name="name"
                      type="text"
                      value={state.value}
                      onChange={handleInputChange}
                      placeholder="Your Name."
                    />
                  </div>
                </div>
                <div className="col-md-4">
                  <div className="contact-info">
                    <input
                      className="email"
                      name="email"
                      type="email"
                      value={state.value}
                      onChange={handleInputChange}
                      placeholder="Your Email"
                    />
                  </div>
                </div>
                <div className="col-md-4">
                  <div className="contact-info">
                    <input
                      className="number"
                      name="number"
                      type="number"
                      value={state.value}
                      onChange={handleInputChange}
                      placeholder="Phone Number"
                    />
                  </div>
                </div>
              </div>
              <textarea
                name="message"
                placeholder="Message."
                value={state.value}
                onChange={handleInputChange}
              ></textarea>
              <div className="nws-button text-center  gradient-bg text-uppercase">
                <button id="contact-button" type="submit">
                  {state.messageSent ? 'Sent!' : 'Send'}{' '}
                  <i
                    className={
                      state.messageSent
                        ? 'fas fa-check'
                        : 'fas fa-caret-right'
                    }
                  ></i>
                </button>
              </div>
            </form>
          </div>
        </div>

Answer 1

状态更新不会与钩子合并 与 class 组件不同，您需要自己这样做。

使用 setState 的函数式方法更新您的状态，并在返回的对象中散布其余值，例如

setstate(prev => ({
  ...prev,
  [name]: value,
}));

尝试拥有多个输入元素

Trying to have multiple input elements

state

reactjs

react-hooks

react-functional-component