為什么我不能將onBlur附加到react中創建的組件上？

Question

我正在學習react.js

我創建了一個示例，其中有一個文本區域。如果在該文本區域中輸入逗號分隔的名稱，則會在文本區域下方顯示一個列出這些名稱的列表。

工作示例如下，請單擊此處

代碼如下

<!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>

所以我的問題是

在事件“ onChange”上，我的示例運行正常，

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

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

但

如果我更改為onBlur，則無法使用。 為什么呢？

Answer 1

您已將組件的值設置為this.state.content的派生this.state.content 。 這就是所謂的受控組件 ，為了更改在字段中顯示的內容，您必須在每次發生事情時（例如，按下按鈕時）更改React狀態。

當輸入更改時，不會激活onBlur ，而在取消選擇元素時會激活它。 因此，您的應用永遠沒有機會真正更改輸入。

Answer 2

您的組件是controlled組件，因為您已經為Textarea設置了value 。

每次鍵入時，都會調用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 個解決方案

解決方案1
0 2017-09-11 12:53:22

解決方案2
0 2017-09-11 13:32:02

為什么我不能將onBlur附加到react中創建的組件上？

問題描述

2 個解決方案

解決方案1 0 2017-09-11 12:53:22

解決方案2 0 2017-09-11 13:32:02

解決方案1
0 2017-09-11 12:53:22

解決方案2
0 2017-09-11 13:32:02