javascript - componentWillReceiveProps 和回调问题

Question

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

问题

我有一个有文本输入的 child 。那个 child 在他 parent 的体内。

我需要:

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

child

有一个用于显示文本的文本 Prop 。textChanged 是父级将订阅的回调。

家长

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

问题

如果我在输入中写入文本，则效果不佳。如果我删除子级中的回调调用( this.props.textChanged(event.target.value); 部分)，输入工作正常，但父级不会收到子级更新。如果我删除 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

不太确定您要做什么，但我会让您的父组件来编排规则并处理文本更改和按钮单击等事件，只需让子组件实际上是“哑巴”，专注于渲染数据。

作为一个例子，我已经实现了这个 here

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

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