迈克尔·肖克的回答是:

class MyForm extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    console.log(data.get('email')); // reference by form input's `name` tag

    fetch('/api/form-submit-url', {
      method: 'POST',
      body: data,
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <label htmlFor="email">Enter your email</label>
        <input id="email" name="email" type="email" />

        <label htmlFor="birthdate">Enter your birth date</label>
        <input id="birthdate" name="birthdate" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}

参见这篇Medium文章:如何用Just React处理表单

此方法仅在按下提交按钮时获取表单数据。我觉得干净多了!

有几种方法可以做到这一点:

1)通过索引从数组的表单元素中获取值

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target[0].value)
}

2)在html中使用name属性

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target.elements.username.value) // from elements property
  console.log(event.target.username.value)          // or directly
}

<input type="text" name="username"/>

3)使用裁判

handleSubmit = (event) => {
  console.log(this.inputNode.value)
}

<input type="text" name="username" ref={node => (this.inputNode = node)}/>

完整的示例

class NameForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault()
    console.log(event.target[0].value)
    console.log(event.target.elements.username.value)
    console.log(event.target.username.value)
    console.log(this.inputNode.value)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="username"
            ref={node => (this.inputNode = node)}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    )
  }
}

我像这样使用React Component state:

<input type="text" name='value' value={this.state.value} onChange={(e) => this.handleChange(e)} />

handleChange(e){
   this.setState({[e.target.name]: e.target.value})
}`

如果元素名多次出现，则必须使用forEach()。

html

  <input type="checkbox" name="delete" id="flizzit" />
  <input type="checkbox" name="delete" id="floo" />
  <input type="checkbox" name="delete" id="flum" />
  <input type="submit" value="Save"  onClick={evt => saveAction(evt)}></input>

js

const submitAction = (evt) => {
  evt.preventDefault();
  const dels = evt.target.parentElement.delete;
  const deleted = [];
  dels.forEach((d) => { if (d.checked) deleted.push(d.id); });
  window.alert(deleted.length);
};

注意，本例中的dels是RadioNodeList，而不是数组，也不是Iterable。forEach()是列表类的内置方法。这里不能使用map()或reduce()。

如果你尝试Aliaksandr Sushkevich解决方案，Typescript会抱怨，一个解决方法可以使用类型断言

<form
    onSubmit={(e: React.SyntheticEvent) => {
    e.preventDefault();
    const target = e.target as typeof e.target & {
      username: { value: string };
      password: { value: string };
    };
    const username = target.username.value; // typechecks
    const password = target.password.value; // typechecks
    // etc...
  }}
>
<input type="text" name="username"/>
...

不过，这仍然只是一种变通方法，因为在这里您要告诉typescript期望什么。如果您添加的值没有相应的输入元素，这将在运行时中断。

从react中导入{useState}

导出默认函数App() { const [data, setData] = useState({})

const updateData = e => {
    setData({
        ...data,
        [e.target.name]: e.target.value
    })
}

const submit = e => {
    e.preventDefault()
    console.log(data)
}

return (
    <form onSubmit={submit}>
        <input
            name="email"
            type="email"
            onChange={updateData}
        />
        <input
            name="password"
            type="password"
            onChange={updateData}
         />
        <button>Submit</button>
    </form>
)

}