IT技术 - ReactJS：onClick 更改元素 - 吾爱随笔录

ReactJS：onClick 更改元素

IT技术 javascript reactjs

2021-04-26 08:12:27

我刚刚开始学习 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函数的渲染？

2个回答

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

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

看下面的例子

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 会计算它是否需要重新渲染自己，在这种情况下，它需要重新渲染组件的哪些部分。

你可以用更清晰的方式解决它：

class EditableLabel extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            text: props.value,
            editing: false
        };
        this.initEditor();
        this.edit = this.edit.bind(this);
        this.save = this.save.bind(this);
    }

    initEditor() {
        this.editor = <input type="text" defaultValue={this.state.text} onKeyPress={(event) => {
            const key = event.which || event.keyCode;
            if (key === 13) { //enter key
                this.save(event.target.value)
            }
        }} autoFocus={true}/>;
    }

    edit() {
        this.setState({
            text: this.state.text,
            editing: true
        })
    };

    save(value) {
        this.setState({
            text: value,
            editing: false
        })
    };

    componentDidUpdate() {
        this.initEditor();
    }

    render() {
        return this.state.editing ?
            this.editor
            : <p onClick={this.edit}>{this.state.text}</p>
    }
}

//and use it like <EditableLabel value={"any external value"}/>;

其它你可能感兴趣的问题

上一篇万豪复印机 i3 Mini 无法打印下一篇检查是否已登录 - React Router App ES6