按名称或

Question

我是React的新手，想知道是否有某种方法可以使用它的名称，ID，密钥等任何组件直接操作。

例如，我正在制作简单的游戏，并且有很多“细胞”。 单元格有state.cellState enabled，disabled或active。

点击一次单元格后，它会变为active并在按下Enter后显示disabled。

这就是重点 - 是否有可能获得活跃的Cell并使用它进行操作？

我正在使用Electron，Enter，其他快捷方式已经有效。

编辑 - 这是一些代码

class Main extends React.Component {
render() {
    let rows = [];

    categories.forEach(function (category, i) {
        rows.push(<Row categoryName={category} rowNo={i + 1} key={category}/>);
    });

    return (
        <div className="clearfix" id="main">
            {rows}
        </div>
    );
}

let Row = React.createClass({
render: function () {
    let notes = [],
        categoryId = this.props.rowNo;

    bonuses.forEach(function (bonus, i) {
        let id = 'cell_' + categoryId.toString() + (i + 1).toString();
        notes.push(<NoteCell bonus={bonus} id={id} key={id}/>);
    });

    return (
        <div className="row clearfix">
            <CategoryCell categoryName={this.props.categoryName}/>
            {notes}
        </div>
    )
}
});

class CategoryCell extends React.Component {
render() {
    return (
        <div className="cell category">
            <h2>
                {this.props.categoryName}
            </h2>
        </div>
    )
}
}

let NoteCell = React.createClass({
getInitialState: function () {
    return {active: true}
},
render: function () {
    return (
        <div className="cell tune" id={this.props.id} onClick={this.handleClick}>
            <div className="tune-container">
                <img src="./static/note.png" className="note"/>
            </div>
            <h3 className="value">{this.props.bonus}</h3>
        </div>
    )
}
});

因此，组件最初具有enabled状态，并以dinamically方式创建。 如何获得当前活动单元并使用它？ 抱歉格式化和ES2015 mixin。

Answer 1

这取决于您希望何时何地进行该操作。

1. 如果您想在Cell组件内部之前执行，您可以在更新状态并进行处理之前检查currentState是否处于活动状态。
2. 如果你想在Cell组件内的后进行，你可以将你的函数作为回调函数传递给你在更新Cell后调用的setState方法状态。
3. 如果要从父视图进行更改，则需要将Cell状态提升到父视图，然后应用过滤器以获取“活动”单元状态。获得与active单元格对应的状态后，您可以将这些状态更改为您想要重新呈现Cell实例的状态（您需要在{{componentsWillReceiveProps()中实现Cell 1}}组件反映这些变化）

这种情况最有可能属于第三种情况。您可以按如下方式将状态提取到Row类。如果您想要从Main组件执行这些操作，则需要将状态提升到Main组件。如果您可以确定您想要对活动项目做什么，我可以进一步解释

    class Main extends React.Component {
        render() {
            let rows = [];

            categories.forEach(function (category, i) {
                rows.push(<Row categoryName={category} rowNo={i + 1} key={category} />)
            });

            return (
                <div className="clearfix" id="main">
                    {rows}
                </div>
            );
        }
    }

    class Row extends React.Component {
        constructor() {
            this.state = {
                categoryId: props.rowNo,
                bonuses: props.bonuses,
            }
            props.bonuses.forEach((bonus, i) => this.state[i] = true)
        }

        handleActiveItems() {
            var activeItems = this.bonuses.filter(x => x.status);
            // Process active Items
        }

        handleClick(i) {
            return (e) => {
                var updatedState = Object.assign({}, this.state);
                updatedState[i] = e.target.value; // Use state setting logic here
                this.setState(updatedState);
            }
        }

        render() {
            let notes = [];
            let categoryId = this.props.rowNo;

            bonuses.forEach(function (bonus, i) {
                let id = 'cell_' + categoryId.toString() + (i + 1).toString();
                notes.push(<NoteCell bonus={bonus} id={id} key={id} status={this.state.status} handleClick={this.handleClick(i).bind(this)} />);
            });

            return (
                <div className="row clearfix">
                    <CategoryCell categoryName={this.props.categoryName} />
                    {notes}
                    <button onClick={this.handleActiveItems}>Click me to change all active buttons in this row</button>
                </div>
            )
        }
    }

    class CategoryCell extends React.Component {
        render() {
            return (
                < div className="cell category" >
                    <h2>
                        {this.props.categoryName}
                    </h2>
                </div >
            )
        }
    }

    class NoteCell extends React.Component {
        constructor(props) {
            this.state = {
                id: props.id,
                status: props.status
            }
            this.handleClick = props.handleClick;
        }

        componentWillReceiveProps(nextProps) {
            this.setState(nextProps)
        }

        render() {
            // Check status and render different types of NoteCell
            return (
                <div className="cell tune" id={this.props.id} onClick={this.handleClick}>
                    <div className="tune-container">
                        <img src="./static/note.png" className="note" />
                    </div>
                    <h3 className="value">{this.props.bonus}</h3>
                </div>
            )
        }
    }