Question

所以我有以下代码，它利用了Bootstrap的按钮样式和功能：

import React from 'react';

import DashboardActions from '../../action/dashboard.js';

export class StatFilter extends React.Component
{
    constructor(props) {
        super(props);
        this.state = {
            selection: this.props.initialSelection
        };
    }

    render() {
        return (
            <div className="btn-group">
                <button ref="viewButton" type="button" className="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                        onChange={DashboardActions.seeValue.bind(null, React.findDOMNode(this.refs.viewButton).value)}>
                    <span>{this.props.initialSelection}</span>
                    <span className="caret"></span>
                    <span className="sr-only">Toggle Dropdown</span>
                </button>
                <ul className="dropdown-menu">
                    <li><a>Revenue</a></li>
                    <li><a>Trends</a></li>
                    <li><a>Statistics</a></li>
                </ul>
            </div>
        );
    }
}

在render函数中，我的StatFilter会将操作附加到事件中。我希望绑定发生的是viewButton按钮的值传递给操作。换句话说，当按钮的值发生变化时，StatFilter会发出一个操作，让我的应用知道其值已更改。

我尝试执行此操作的方法是使用bind()将viewButton的值传递给操作。然而，这给了我警告：

t正在其render（）中访问getDOMNode或findDOMNode。 render（）应该是props和state的纯函数。它永远不应该访问需要来自先前渲染的陈旧数据的东西，例如refs。将此逻辑移至componentDidMount和componentDidUpdate。

错误：

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;为null

虽然我确定我做错了，警告是否也告诉了我一些事情？我应该在渲染函数中处理所有这些逻辑吗？如果没有，那么我应该把它放在哪里？另外，为什么上面的代码不起作用？

Answer 1

在render方法返回中调用findDOMNode是个问题。您不能直接在事件处理程序中调用函数，而是必须向事件处理程序传递回调。这在组件呈现时不会调用函数调用，而是在事件发生时调用。

export class StatFilter extends React.Component
{
    constructor(props) {
        super(props);
        this.state = {
            selection: this.props.initialSelection
        };
    }
    handleChange(){
        DashboardActions.seeValue(React.findDOMNode(this.refs.viewButton).value);
    }
    render() {
        return (
            <div className="btn-group">
                <button ref="viewButton" type="button" className="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                        onChange={this.handleChange}>
                    <span>{this.props.initialSelection}</span>
                    <span className="caret"></span>
                    <span className="sr-only">Toggle Dropdown</span>
                </button>
                <ul className="dropdown-menu">
                    <li><a>Revenue</a></li>
                    <li><a>Trends</a></li>
                    <li><a>Statistics</a></li>
                </ul>
            </div>
        );
    }
}

如何将数据从元素传递到ReactJS中的操作？

1 个答案: