Question

我正在学习react.js

我创建了一个有textarea的例子，如果我在该textarea中输入逗号分隔名称，我会列出那些 textarea下面的名字。

工作实例如下， click here

代码如下

<!DOCTYPE HTML>
<html>
    <head>
        <title>React Template</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">     
        <style type="text/css">
            .mywidth{
                width : 50%;
            } 
        </style>    
    </head>
    <body>
        <!-- Body Content -->
            <div id="mainContent"></div>
        <!-- Body Content -->

        <!-- The core React library -->
        <script src="/node_modules/react/dist/react.min.js"></script>
        <!-- The ReactDOM Library -->
        <script src="/node_modules/react-dom/dist/react-dom.min.js"></script>

        <script type="text/javaScript">
            (function(){
                'use strict'
                // custom javaScript content

                var DataFeedComponent = React.createClass({
                    propTypes : {
                        "defaultValue" : React.PropTypes.string.isRequired
                    },
                    getDefaultProps : function(){
                        return {
                            "content" : ""
                        }
                    },
                    getInitialState : function(){
                        return {
                            "content" : this.props.defaultValue
                        }
                    },
                    doRenderingUI : function(evt){                                              
                        this.setState({
                            content : evt.target.value
                        });
                    },
                    render : function(){
                        var TextAreaElement = React.createElement("textarea",{
                            "className" : "mywidth",
                            "value" : this.state.content,
                            "onChange" : this.doRenderingUI
                        });

                        var listElementArray = [];

                        var someContent = this.state.content.split(",");

                        for(var x = 0; x < someContent.length; x++){

                            if(someContent[x] !== undefined && someContent[x] !== null && someContent[x] !== ""){
                                listElementArray.push(React.createElement("li",null,someContent[x]));   
                            }                               

                        } // end of for

                        var orderedListingElement =  React.createElement("ol",null,listElementArray);

                        var DivElement = React.createElement("div",null,TextAreaElement,orderedListingElement);
                        return DivElement;
                    }
                });



                var elementObject = React.createElement(DataFeedComponent,{ "defaultValue" : "Victor,Nick" });

                ReactDOM.render(elementObject,document.getElementById("mainContent"));
            })();   
        </script>
    </body>
</html>

所以我的问题是

on event＆＃39; onChange＆＃39;我的例子很好，

render : function(){
                        var TextAreaElement = React.createElement("textarea",{
                            "className" : "mywidth",
                            "value" : this.state.content,
                            "onChange" : this.doRenderingUI
                        });

即。在textarea中输入文本时，我可以看到textarea下面的列表。

但是

如果我改为onBlur，它就不起作用了。为什么？

Answer 1

您将组件的值设置为this.state.content的衍生物。这就是所谓的受控组件，为了更改字段中显示的内容，每次发生某些事情时（即按下按钮时）必须更改React状态）。

输入更改时

onBlur未激活，取消选择元素时会激活它。因此，您的应用永远不会有机会实际更改输入。

Answer 2

您的组件是controlled组件，因为您已将value设置为Textarea。

每次键入时，onChange都会被调用，而后者会更新状态，并且会更新textarea中的值。当您更改为onBlur时，您的状态永远不会设置，因此当您键入时，该值不会更改。

最简单的解决方案是将value更改为defaultValue，因为我猜你想将初始值传递给Textarea，这看起来像下面的

 var TextAreaElement = React.createElement("textarea",{
                        "className" : "mywidth",
                        "defaultValue" : this.state.content,
                        "onBlur" : this.doRenderingUI
                    });

但是如果你想让组件仍然受到控制，那么你需要同时传递onChange和onBlur并妥善处理它。

为什么我无法将onBlur附加到react中创建的组件？

2 个答案: