javascript - 通过事件捕获React Refs

我有以下JSX：

import React, {Component} from 'react';

class Register extends Component {
    handleSubmit(){
        console.log("hey!")
    }

    setHandles(c){
        //This never executes.
        console.log("foo");
    }

    render() {
        return (
<form className='form-horizontal' onSubmit={this.handleSubmit}>
    <h4>Create a new account.</h4>
    <hr />
    <div className="form-group">
        <label htmlFor="Email" className="col-md-2 control-label">User Name</label>
        <div className="col-md-10">
            //********************************
            //**** USING SETHANDLES HERE *****
            //********************************
            <input type="email" className="form-control" ref="{this.setHandles}" />
            <span className="text-danger"></span>
        </div>
    </div>
    <div className="form-group">
        <label htmlFor="Password" className="col-md-2 control-label">Password</label>
        <div className="col-md-10">
            //********************************
            //**** USING SETHANDLES HERE *****
            //********************************
            <input type="password" className="form-control" ref="{this.setHandles}" />
            <span className="text-danger"></span>
        </div>
    </div>
...

我的setHandles函数从不执行。为什么？

我的意图是给每个input属性ref="{this.setHandles}"，以便setHandles回调可以注册每个对应的DOM元素。稍后，当我准备发布表单时，可以遍历DOM元素数组以获取相应的输入值。

最佳答案

它没有调用您的函数，因为您要传递一个字符串remove the quote marks，ref={this.setHandles}。

但是，实现所需目标的更好方法是为每个输入分配一个onChange事件，以便将值存储在您的状态中。

像这样

constructor(props){
   this.onChange = this.onChange.bind(this);
   this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(){
   console.log(this.state); // You got your input values here
}
onChange(e){
    this.setState({[e.target.name] : e.target.value});
}
render(){
   return <div><form>
    <input type="text" name="mail" className="form-control"
    onChange={this.onChange} />
    <input type="text" name="password"
    className="form-control" ref={this.setHandles} onChange={this.onChange} />
    <button onClick={this.onSubmit}>Submit</button>
   </form></div>
}

full working example