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

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(){…}访问电子邮件和密码字段?


当前回答

像这样给你的输入参考

<input type="text" name="email" placeholder="Email" ref="email" />
<input type="password" name="password" placeholder="Password" ref="password" />

然后你可以像soo一样在你的handleLogin中访问它

handleLogin: function(e) {
   e.preventDefault();
    console.log(this.refs.email.value)
    console.log(this.refs.password.value)
}

其他回答

这是一个动态添加字段的示例。在这里,表单数据将使用React useState钩子通过输入名称键存储。

import React, { useState } from 'react' function AuthForm({ firebase }) { const [formData, setFormData] = useState({}); // On Form Submit const onFormSubmit = (event) => { event.preventDefault(); console.log('data', formData) // Submit here }; // get Data const getData = (key) => { return formData.hasOwnProperty(key) ? formData[key] : ''; }; // Set data const setData = (key, value) => { return setFormData({ ...formData, [key]: value }); }; console.log('firebase', firebase) return ( <div className="wpcwv-authPage"> <form onSubmit={onFormSubmit} className="wpcwv-authForm"> <input name="name" type="text" className="wpcwv-input" placeholder="Your Name" value={getData('name')} onChange={(e) => setData('name', e.target.value)} /> <input name="email" type="email" className="wpcwv-input" placeholder="Your Email" value={getData('email')} onChange={(e) => setData('email', e.target.value)} /> <button type="submit" className="wpcwv-button wpcwv-buttonPrimary">Submit</button> </form> </div> ) } export default AuthForm

像这样给你的输入参考

<input type="text" name="email" placeholder="Email" ref="email" />
<input type="password" name="password" placeholder="Password" ref="password" />

然后你可以像soo一样在你的handleLogin中访问它

handleLogin: function(e) {
   e.preventDefault();
    console.log(this.refs.email.value)
    console.log(this.refs.password.value)
}

这可能会帮助Meteor (v1.3)的用户:

render: function() {
    return (
        <form onSubmit={this.submitForm.bind(this)}>
            <input type="text" ref="email" placeholder="Email" />
            <input type="password" ref="password" placeholder="Password" />
            <button type="submit">Login</button>
        </form>
    );
},
submitForm: function(e) {
    e.preventDefault();
    console.log( this.refs.email.value );
    console.log( this.refs.password.value );
}

同样,这个也可以用。

handleChange: function(state,e) {
  this.setState({[state]: e.target.value});
},
render : function() {
  return (
    <form>
      <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
      <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handleChange.bind(this, 'password')}/>
      <button type="button" onClick={this.handleLogin}>Login</button>
    </form>
  );
},
handleLogin: function() {
  console.log("EMail: ", this.state.email);
  console.log("Password: ", this.state.password);
}

从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>
)

}