Question

我正在按照教程了解React.js的工作原理。我被困在使用refs访问组件的地方。如果有人不介意帮助看看我的代码并告诉我我错在哪里。但是，这就是我所做的。我有一个通用组件App和html Input标记，用于更新refs中的State。但是，我不知道为什么它仍然显示undefined

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      red: 0,
      green: 0,
      blue: 0
    }
    this.update = this.update.bind(this);
  }

  //To manage the state
  update(e) {
    this.setState({
      red: ReactDOM.findDOMNode(this.refs.red.refs.inp).value,
      green: ReactDOM.findDOMNode(this.refs.green.refs.inp).value,
      blue: ReactDOM.findDOMNode(this.refs.blue.refs.inp).value
    })
    console.log(this.state); //<This is giving me Object {red: undefined, green: undefined, blue: undefined}
  }

  render() {
    return (
      <div>
        <Slider ref="red" update={this.update}/>
        {console.log(this.state.red)} // This is undefined
        {this.state.red}
        <br />
        <Slider ref="green" update={this.update}/>
        {console.log(this.state.green)} // This is undefined
        {this.state.green}
        <br />
        <Slider ref="blue" update={this.update}/>
        {console.log(this.state.blue)} // This is undefined
        {this.state.blue}
        <br />
      </div>
    )
  }
}

//Working with refs. Refs are a way of referencing components within our react application
class Slider extends React.Component {
  render() {
    return (
      <div>
        <input ref="inp" type="range" min="0" max ="255" onChange={this.props.update}/>
      </div>
    )
  }
}

ReactDOM.render(
  <App />, document.getElementById('app')
);

export default App;

Answer 1

根据React doc：

如果您还没有使用React编写多个应用程序，那么您的第一个倾向通常是尝试使用refs来“让事情发生”。如果是这种情况，请花一点时间，更关键地考虑组件层次结构中应该拥有状态的位置。通常，很明显，“拥有”该状态的适当位置在层次结构中处于更高级别。将状态放置在那里通常会消除使用refs“让事情发生”的任何愿望 - 相反，数据流通常会实现你的目标。

试试这个：

class App extends Component {

    constructor(){
        super();
        this.state = {
            slider : 0,
        }
        this.update = (e) => {
            const {name,value} = e.target;
            this.setState({
                [name] : value,
            })
        }
    }
    render() {
        return (
          <div>
                <Slider name="slider" update={this.update} />
                {this.state.slider}
          </div>
        );
    }
}

class Slider extends React.Component {
    render() {
            return (
            <div>
                <input name={this.props.name} type="range" min="0" max="255" onChange={this.props.update}/>
            </div>
        )
    }
}

Answer 2

findDOMNode返回相应的本机浏览器DOM元素，在您的情况下：

<div>
    <input type="range" min="0" max ="255" onChange={this.props.update} />
</div>

所以你正在读取div的值而不是输入。

检查此修复http://jsfiddle.net/69r5kn16/2/

Answer 3

如果您想使用refs，则应在安装组件后使用它们，这意味着您应该在componentDidMount中使用它们。

我看到您在this.update组件中致电Slider。子组件和parentComponent的顺序componentDidMount如下：

componentWillMount Of parent
componentWillMount of child
componentDidMount of child
componentDidMount of Parent.

请检查何时在滑块组件中调用update方法。

使用refs访问React中的组件

3 个答案: