我在渲染函数中有一个简单的表单,如下所示:

render : function() {
      return (
        <form>
          <input type="text" name="email" placeholder="Email" />
          <input type="password" name="password" placeholder="Password" />
          <button type="button" onClick={this.handleLogin}>Login</button>
        </form>
      );
    },
handleLogin: function() {
   //How to access email and password here ?
}

我应该在我的handleLogin: function(){…}访问电子邮件和密码字段?


当前回答

提升用户体验;当用户单击提交按钮时,您可以尝试让表单首先显示发送消息。一旦我们收到来自服务器的响应,它就可以相应地更新消息。我们在React中通过链接状态来实现这一点。参见下面的代码片段:

下面的方法进行第一次状态改变:

handleSubmit(e) {
    e.preventDefault();
    this.setState({ message: 'Sending...' }, this.sendFormData);
}

一旦React在屏幕上显示上面的发送消息,它就会调用将表单数据发送到服务器的方法:this.sendFormData()。为了简单起见,我添加了一个setTimeout来模拟这个过程。

sendFormData() {
  var formData = {
      Title: this.refs.Title.value,
      Author: this.refs.Author.value,
      Genre: this.refs.Genre.value,
      YearReleased: this.refs.YearReleased.value};
  setTimeout(() => { 
    console.log(formData);
    this.setState({ message: 'data sent!' });
  }, 3000);
}

在React中,this.setState()方法呈现一个具有新属性的组件。因此,您还可以在表单组件的render()方法中添加一些逻辑,这些逻辑将根据我们从服务器获得的响应类型而表现不同。例如:

render() {
  if (this.state.responseType) {
      var classString = 'alert alert-' + this.state.type;
      var status = <div id="status" className={classString} ref="status">
                     {this.state.message}
                   </div>;
  }
return ( ...

codepen

其他回答

下面是我使用单个inputChangeHandler收集多个表单输入的方法

import React from "react";

const COLORS = ["red", "orange", "yellow", "purple", "green", "white", "black"];

export default function App() {

  const initialFormFields = {
    name: undefined,
    email: undefined,
    favourite_color: undefined
  };
  const [formInput, setFormInput] = React.useState(initialFormFields);

  function inputChangeHandler(event) {
    setFormInput(prevFormState => ({
      ...prevFormState,
      [event.target.name]: event.target.value
    }))
  };

  return (
    <div className="App">
      <form>
        <label>Name: <input name="name" type="text" value={formInput.name} onChange={inputChangeHandler}/></label>
        <label>Email: <input name="email" type="email" value={formInput.email} onChange={inputChangeHandler}/></label>
        <div>
          {COLORS.map(color => <label><input type="radio" name="favourite_color" value={color} key={color} onChange={inputChangeHandler}/> {color} </label>)}
        </div>
      </form>

      <div>
        Entered Name: {formInput.name}
        Entered Email: {formInput.email}
        Favourite Color: {formInput.favourite_color}
      </div>
    </div>
  );
}

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

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中通过链接状态来实现这一点。参见下面的代码片段:

下面的方法进行第一次状态改变:

handleSubmit(e) {
    e.preventDefault();
    this.setState({ message: 'Sending...' }, this.sendFormData);
}

一旦React在屏幕上显示上面的发送消息,它就会调用将表单数据发送到服务器的方法:this.sendFormData()。为了简单起见,我添加了一个setTimeout来模拟这个过程。

sendFormData() {
  var formData = {
      Title: this.refs.Title.value,
      Author: this.refs.Author.value,
      Genre: this.refs.Genre.value,
      YearReleased: this.refs.YearReleased.value};
  setTimeout(() => { 
    console.log(formData);
    this.setState({ message: 'data sent!' });
  }, 3000);
}

在React中,this.setState()方法呈现一个具有新属性的组件。因此,您还可以在表单组件的render()方法中添加一些逻辑,这些逻辑将根据我们从服务器获得的响应类型而表现不同。例如:

render() {
  if (this.state.responseType) {
      var classString = 'alert alert-' + this.state.type;
      var status = <div id="status" className={classString} ref="status">
                     {this.state.message}
                   </div>;
  }
return ( ...

codepen

不需要使用引用,你可以使用事件访问

function handleSubmit(e) {
    e.preventDefault()
    const {username, password } = e.target.elements
    console.log({username: username.value, password: password.value })
}

<form onSubmit={handleSubmit}>
   <input type="text" id="username"/>
   <input type="text" id="password"/>
   <input type="submit" value="Login" />
</form>

如果元素名多次出现,则必须使用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()。