Question

我在React中遇到了一个很大的问题 - 可能是缺乏理解。我有一个子组件，它进行回调并具有componentWillReceiveProps函数。问题是我无法写出孩子持有的文字输入。我会在代码中更好地解释自己。

问题

我有一个带文字输入的孩子。那个孩子在他父母的身边。

我需要：

在文本输入上手动输入。
通知家长文本已更改。
在某些情况下修改来自父级的输入。

孩子

有文本支持要显示的文本。 textChanged是父级将要回拨的回调。

父母

包含子项，具有子项回调函数，该函数不更新子项的状态，并保存一个按钮来修改子项的文本。

问题

如果我在输入中写入文本，则效果不佳。如果我删除子进程中的回调函数（this.props.textChanged（event.target.value）; part），则输入效果很好，但父进程没有收到子更新。如果我删除了componentWillReceiveProps部分，我无法从其父级更新子文本。

您可以使用代码段 - 它“有效”。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container'></div>

<script type="text/babel">
    
var Child = React.createClass({
    propTypes: {
        text: React.PropTypes.string,
        textChanged: React.PropTypes.func
    },
    getInitialState: function () {
        return ({
            text: this.props.text
        });
    },
    handleChange: function (event) {
        if (event.target.value != null) {
            this.setState({ text: event.target.value });
            if (this.props.textChanged !== undefined) {
                this.props.textChanged(event.target.value);
            }
        }
    },
    componentWillReceiveProps: function(nextProps) {
        if (nextProps.text != this.state.text) {
            this.setState({
                text: nextProps.text
            });
        }
    },
    render: function () {
        return (
            <div>
                <input className="form-control" value={this.state.text} onChange={this.handleChange} />
            </div>
            );
    }
});

var Parent = React.createClass({
    propTypes: {
        childText: React.PropTypes.string,
    },
    getInitialState: function () {
        return ({
            childText: this.props.childText,
            stateChangingProperty: true
        });
    },
    handleTextChange: function (event) {
        this.setState({
            stateChangingProperty: !this.state.stateChangingProperty
        });
    },
    handleButton: function () {
        this.setState({
            childText: "SOMETHING NEW"
        });
    },
    render: function () {
        return (
            <div>
                <Child text={this.state.childText} textChanged={this.handleTextChange} />
                <button type="button" onClick={this.handleButton}>Write SOMETHING NEW on child</button>
            </div>
            );
}
});

    ReactDOM.render(<Parent childText="text" />,
                    document.getElementById('container')
    );
    
    
    </script>

问题

如何实现理想的行为？我的目标错了吗？

提前致谢！

Answer 1

我不确定你要做什么，但我会让你的 Parent 组件编排规则并处理文本更改和按钮点击等事件，只需让子组件成为有效'哑巴'，专注于渲染数据。

举个例子，我已经实现了这个here

正如您将看到的，可以删除 Child 组件中的大多数生命周期方法。现在，如果您需要应用任何“业务逻辑”来修改已输入的内容，您可以在控制 Parent 组件的 handleTextChange 函数中执行此操作（例如，转换为upper案例并设置状态。）

这种容器模式在React中非常常见和惯用： https://medium.com/@learnreact/container-components-c0e67432e005#.jg5yiorko

componentWillReceiveProps和回调问题

1 个答案: