Question

我刚开始学习React并有一个问题。

我想做以下事情：

如果用户点击某个段落，我想将该元素更改为具有预填充段落内容的输入字段。（如果用户具有某些特权，最终目标是直接编辑）

我走到这一步，但完全不知所措。

var AppHeader = React.createClass({
    editSlogan : function(){
        return (
            <input type="text" value={this.props.slogan} onChange={this.saveEdit}/>
         )
    },
    saveEdit : function(){
        // ajax to server
    },
    render: function(){
        return (
            <header>
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-12">
                            <h1>{this.props.name}</h1>
                            <p onClick={this.editSlogan}>{this.props.slogan}</p>
                        </div>
                    </div>
                </div>
            </header>
        );
    }
});

如何从editSlogan函数覆盖渲染？

Answer 1

如果我正确理解您的问题，您希望在“onClick”事件的情况下呈现不同的元素。

这是反应状态的一个很好的用例。

采取以下示例

React.createClass({ 
    getInitialState : function() {
       return { showMe : false };
    },
    onClick : function() {
       this.setState({ showMe : true} );
    },
    render : function() {
        if(this.state.showMe) { 
            return (<div> one div </div>);
        } else { 
            return (<a onClick={this.onClick}> press me </a>);
        } 
    }
})

这将改变组件状态，并使React呈现div而不是a-tag。当组件状态被改变时（使用setState方法），React计算它是否需要重新渲染自己，并且在这种情况下，它需要重新渲染组件的哪些部分。

更多关于国家的信息 https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

Answer 2

您可以解决一些更清晰的方法：

unlist(strsplit(gsub("\"", "", dat), split = ","))

 [1] ""          "myid"      "var"       "1"         "1"         "0.5949020" "2"        
 [8] "2"         "0.8515591" "3"         "3"         "0.8139010" "4"         "4"        
[15] "0.3804234" "5"         "5"         "0.4923082" "6"         "6"         "0.9933775"
[22] "7"         "7"         "0.1740895" "8"         "8"         "0.8342808" "9"        
[29] "9"         "0.3958154" "10"        "10"        "0.9690561"

ReactJS：onClick更改元素

2 个答案: