React.js 块元素的双向绑定

Question

我正在尝试通过反应将一个值绑定到 div，以便我可以维护该元素的状态（例如，开-关）看起来我应该使用 LinkedStateMixin，但我的实验下面证明了 React 不支持块级元素的任意属性。这两个元素都有默认值，但 div e.target.value returns 未从其 onclick 处理程序中定义，而输入元素值已正确设置。知道如何将数据绑定到 div 吗？谢谢！

var Component = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {message: 'Hello!'};
    },
    render: function () {
        var valueLink = this.linkState('message');
        var handleClick = function(e) {
            console.log(e.target.value);
            valueLink.requestChange(e.target.value);
        };
        return (
        <div>
            <input type="text" onClick={handleClick} defaultValue={valueLink.value} />
            <div onClick={handleClick} defaultValue={valueLink.value}>
                {this.state.message}
            </div>
        </div>
    );
    }
});

React.render(<Component />, document.body);

http://jsfiddle.net/su8r5Lob/

Answer 1

您的代码不起作用的原因是 <div> 元素没有 value 属性。只有接收用户输入的元素才有它。所以当调用 handleClick 时，valueLink.requestChange 接收 undefined 作为参数。

我已经稍微更新了你的 Fiddle，现在它支持 onChange 事件的双向绑定。

var Component = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {message: 'Hello!'};
    },
    render: function () {
        var valueLink = this.linkState('message');
        var handleClick = function(e) {
            console.log(e.target.value);
            valueLink.requestChange(e.target.value);
        };
        return (
        <div>
            <input type="text" onChange={handleClick} value={valueLink.value} />
            <input type="text" onChange={handleClick} value={valueLink.value} />
        </div>
    );
    }
});

React.render(<Component />, document.body);

但是，如果你想将它绑定到一个 div 元素，我给你这个建议。我不确定这是否正是您所期望的，但它是：

var Component = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {message: 'Hello!'};
    },
    render: function () {
        var valueLink = this.linkState('message');
        var handleClick = function(e) {
            console.log(e.target.value);
            valueLink.requestChange(e.target.value);
        };
        return (
        <div>
            <input type="text" onChange={handleClick} value={valueLink.value} />
            <div onClick={handleClick.bind(this, {target: {value: 'someDivValue'}})} defaultValue={valueLink.value}>
                {this.state.message}
            </div>
        </div>
    );
    }
});

React.render(<Component />, document.body);

请注意，我为 div 提供了一个默认值，每次用户单击它时，该值都会设置为 valueLink。而且我必须将输入上的事件更改为 onchange 以便它可以在用户键入内容时更新其值。

Answer 2

var Component = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {
            message: 'Hello!',
            active: false
        };
    },
    inputClick : function(e) {
        console.log(e.target.value);
    },
    toggleActive : function(e){
        console.log('div state', this.state.active);
        var newState = !this.state.active;
        this.setState({active: newState});
    },
    render: function () {
        var cx = React.addons.classSet;
        var valueLink = this.linkState('message');
        var classes = cx({
            'base-class': true,
            'element-active': this.state.active
        });

        return (
        <div>
            <input type="text" onClick={this.inputClick} defaultValue={valueLink.value} />
            <div onClick={this.toggleActive} className={classes}>
                {this.state.message}
            </div>
        </div>
    );
   }
});

React.render(<Component />, document.body);

http://jsfiddle.net/su8r5Lob/1/

React.js 块元素的双向绑定

React.js two-way binding on block elements

html

javascript

reactjs