reactjs – 如何处理React.js中的子组件的点击事件,是否有一个React“方式”？

我正在尝试创建/原型一个具有搜索过滤器的窗口小部件和具有键值/父子关系的2面板.右侧面板包含类别,左侧面板具有与单个类别相关联的兴趣.可以选择类别行以显示相关联的兴趣复选框.我没有想到要了解如何使用复选框更新表单提交,首先我需要更多地了解使数据流动的正确方法.

这是我第一次进入React,我知道React鼓励单向数据流.我觉得我正在使用jQuery来处理事件而正确地更新兴趣小组.我想知道一些替代兴趣小组更新的方法.

从我所看到的,为了更新父级(我相信它在React文档中称为所有者)组件,您需要在child / ownee组件上定义回调.我会感谢对此的解释,如果我不正确地使用国家vs道具的利益.我试图只有搜索过滤器&复选框是窗口小部件的状态的一部分,因为我看到可过滤的数据应该属于道具.

更新：我改变了要在getDefaultProps中初始化的兴趣,所以现在我将它们用作道具.我认为这更是反动的方式,我是对的吗？我还通过更改handleCategoryRowClick函数来改变兴趣的更新方式.我认为我现在正在做的事情更为反应,但仍然会喜欢任何有使用React的经验的人都可以给予任何建议,谢谢.

任何帮助将不胜感激！

/** @jsx React.DOM */

var InterestRow = React.createClass({
    render: function() {
        return (
            <div>
                <label>{this.props.interest.name}</label>
                <input type="checkbox" ref={this.props.key} value={this.props.key} />
            </div>
        )
   }
});

var InterestPanel = React.createClass({
    var interestPanel = this;
    var rows = [];

    render: function() {
        var rows = [];
        var i = 0;

        _(this.props.interests).each(function (interest) {
            rows.push(<InterestRow interest={interest} key={interest.value} />);
        });

        return (
            <form>{rows}</form>
        )
    }
});

var CategoryRow = React.createClass({
    render: function() {
        return (
            <li onClick={this.props.handleClick.bind(null,this.props.interests)}>{this.props.category}</li>
        )
    }
});

var CategoriesPanel = React.createClass({
render: function() {
    var categoriesPanel = this;
    var rows = [];
    var categories = [];
    var interests = [];
    var interestSet = [];
    var missedSet = [];
    var lastCategory = null;
    var category;
    var interest;
    var i = 0;

    _.each(categoriesPanel.props.data,function (datum) {
        name = datum.name;
        value = datum.targeting_value;
        category = name.split('/')[0];
        interest = {name: name.split('/')[1],value: value}

        if (_.contains(interest.name.toLowerCase(),categoriesPanel.props.searchText.toLowerCase())) {
            if (category !== lastCategory) {
                if (interestSet.length > 0) {
                    interests.push(interestSet.concat(missedSet));
                }

                lastCategory = category;
                categories.push(category);
                interestSet = [];
                interestSet.push(interest);
                missedSet = [];
            } else {
                if (!_.contains(categories,category)) {
                    categories.push(category);
                    interestSet.push(interest);
                } else {
                    interestSet.push(interest);
                }
            }
        } else {
            if (category !== lastCategory) {
                if (interestSet.length > 0) {
                    interests.push(interestSet.concat(missedSet));
                }

                lastCategory = category;
                interestSet = [];
                missedSet = [];
                missedSet.push(interest);
            } else {
                missedSet.push(interest);
            }
        }
    });

    if (interestSet.length > 0) {
        interests.push(interestSet.concat(missedSet));
    }

    var interestsObject = _.zipObject(categories,interests);

    _.each(interestsObject,function (interestSet,category) {
        i++;
        rows.push(<CategoryRow category={category} key={i} interests={interestSet} handleClick={categoriesPanel.props.handleClick} />)
    });

    return (
        <div>
            <ul>{rows}</ul>
        </div>
    )
}
});

var SearchBar = React.createClass({
    handleChange: function() {
        this.props.onUserInput(
            this.refs.searchTextInput.getDOMNode().value
        )
    },render: function() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type="text"
                    placeholder="Search Interests..."
                    value={this.props.searchText}
                    ref="searchTextInput"
                    onChange={this.handleChange}
                />
            </form>
        );
     }
});

var InterestsTable = React.createClass({
loadDataFromTwitter: function() {
    $.ajax({
        url: this.props.url,dataType: 'json',success: function(data) {
            this.setProps({data: data});
        }.bind(this)
    });
},getInitialState: function() {
   return {
       searchText: ''
   }
},getDefaultProps: function() {
   return {
       data: [],interests: []
   }
},componentWillMount: function() {
    this.loadDataFromTwitter();
},handleUserInput: function(searchText) {
   this.setState({
       searchText: searchText
   });
},handleCategoryRowClick: function(interests) {
    this.setProps({
        interests: interests
    });
},render: function() {
    return (
        <div>
            <SearchBar
                searchText={this.state.searchText}
                onUserInput={this.handleUserInput}
            />
            <CategoriesPanel
                data={this.props.data}
                searchText={this.state.searchText}
                handleClick={this.handleCategoryRowClick}
            />
            <InterestsPanel
                interests={this.props.interests}
                searchText={this.state.searchText}
            />
        </div>
    );
}
});

React.renderComponent(
     <InterestsTable url="/api/interests" />,document.getElementById('content')
);

>有一些可以删除的jQuery可以移动：

componentDidMount: function() {
      $(document).on("handleCategoryRowClick",this.handleCategoryRowClick);
    },

尽可能多地处理道具不可变,反应生活
循环方法将按预期工作.在这种情况下,利益应该是
而不是道具,因为InterestsTable组件拥有
并修改它;它不会被组件的父进程传入：

getInitialState: function() {
      return {
        interests: [],searchText: ""
      };
    },handleCategoryRowClick: function(e,interests) {
      this.setState({
        interests: interests
      });
    },