Question

我在React组件中有这个方法（我后来传递给render（）方法）：

renderNutrientInputs: function (num) {
    var inputs = [];
    for (var i =0; i < num; i++) {
        inputs.push(<div key={i}>
            <label>Nutrient name: </label><input type="text"/>
            <label>Nutrient value: </label><input type="text" />
        </div>);
    }

    return inputs;
}

我正在尝试“营养价值”文本框的每次更改，以获取“营养素名称”文本框的当前值。我首先给它们分配了“ref”，但我认为页面上可能有多对它们（并且识别它们的唯一方法是按键）。我也试过这样的事情：

<label>Nutrient name: </label><input type="text" ref="nutName"/>
<label>Nutrient value: </label><input type="text" onChange={this.handleNutrientValueChange.bind(null, ReactDOM.findDOMNode(this.refs.nutName))}/>

但得到了React的警告：

警告：AddForm正在访问其中的getDOMNode或findDOMNode 渲染（）。 render（）应该是props和state的纯函数。它永远不应该访问需要陈旧数据的东西上一次渲染

有没有办法将onChange事件监听器附加到营养值文本框并在事件监听器函数中访问“营养名称”文本框的当前值？

Answer 1

您不想直接访问DOM元素。没有必要这样做......使用您的数据，忘记DOM！

你想要的是＆＃34;听取第n个营养素的变化。我想知道它的名字和它的价值＆＃34;。您需要将这些数据存储在某处，在此示例中，请在state中说明。

实施getInitialState方法。让我们从空数组开始，让用户添加营养素。

getInitialState() {
    return { nutritients: [] };
},

在render方法中，让用户点击＆＃34; +＆＃34;添加营养，让我们说

addNutritient() {
    const nutritients = this.state.nutritients.concat();
    nutritients.push({ name: "", value: undefined });
    this.setState({ nutritients });
},

render() {
    return (
        <div>
            <div onClick={this.addNutritient}>+</div>
        </div>
    )
}

好的，让我们专注于渲染和更新营养素：

addNutritient() {
    const nutritients = this.state.nutritients.concat();
    nutritients.push({ name: "", value: undefined });
    this.setState({ nutritients });
},

renderNutritients() {
    const linkNutritient = (idx, prop) => {
        return {
            value: this.state.nutritients[idx][prop],
            requestChange: (value) {
                const nutritients = this.state.nutritients.concat();
                nutritients[idx][prop] = value;
                this.setState({ nutritients });
            },
        }
    };

    const nutritients = [];
    return (
        this.state.nutritients.map((props, idx) => (
            <div>
                <input valueLink={linkNutritient(idx, "name")} />
                <input valueLink={linkNutritient(idx, "value")} />
            </div>
        ))
    )
},

render() {
    return (
        <div>
            { this.renderNutritients() }
            <div onClick={this.addNutritient}>+</div>
        </div>
    )
}

手动编码，抱歉语法错误或打字。

修改看看这个工作小提琴https://jsfiddle.net/Lfrk2932/
玩它，它将帮助您了解正在发生的事情另外，看一下React docs，特别是＆＃34; valueLink＆＃34; https://facebook.github.io/react/docs/two-way-binding-helpers.html#reactlink-without-linkedstatemixin

Answer 2

我不喜欢使用React的双向绑定，这是一种通量反模式。只需在输入元素和setState中添加一个onChange监听器。

你的州将是这样的： {0：{nutrientName：xyz，nutrientValue：123}， 1：{nutrientName：abc，nutrientValue：456}}

因此，当您将营养价值456更改为654时，您可以说其对应的名称为abc，反之亦然。

关于React的全部内容是关于处理数据而不是DOM：）

在React中获取元素兄弟值

2 个答案: