Question

我有以下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元素数组以获取相应的输入值。

Answer 1

它没有调用你的函数，因为你传递了一个字符串，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

Answer 2

setHandles函数永远不会运行，因为它没有理由;它没有被调用，最终没有()的JSX中的函数不会被运行，除非他们被要求。

我建议把你想要的函数放到componentDidMount() React方法中，所以它看起来像这样：

class Register extends Component {
  componentDidMount() {
    // Do the thing
  }

  render() {
    ... 
  }
}

这是React的文档：https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

通过事件捕获React Refs

2 个答案: