React.js двусторонняя привязка к элементам блока

Question

Я пытаюсь связать значение с div с ответом, чтобы я мог поддерживать состояние для этого элемента (например, включено-выключено). Похоже, я должен использовать LinkedStateMixin , но мой эксперимент ниже доказывает, что реакция не поддерживает произвольные атрибуты для элементов уровня блока. Оба элемента имеют значения по умолчанию, но div e.target.value возвращает undefined из своего обработчика 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/