2015-11-20 3 views
0

Я пытаюсь обновить значения в Datalist, когда пользователь вводит текстовое поле ввода, я как бы новичок с ReactJS, я пробовал этот код, но он не работает :Изменение параметров в Datalist с помощью responseJS

var MyList = React.createClass({ 
getInitialState: function() { 
    return { 
     options: [<option key={'taste'} value={'zeitwert'}>{'Name'}</option>] 
    } 
}, 
changeHandler: function(e) { 
    console.log('In changeHandler'); 
    this.state.options.push(
     <option key={'some_key2'} value={'some_value2'}>{'Second Option'}</option>, 
     <option key={'some_key3'} value={'some_value3'}>{'Third Option'}</option> 
    ); 
}, 
render: function() { 
    return (
     <div> 
     <input type="text" className="form-control" onChange={this.changeHandler} placeholder="Owner" list="slist" name="owner_id" /> 
     <datalist id="slist">{this.state.options}</datalist> 
     </div> 
    ) 
} 

});

Я не получаю сообщение об ошибке, и строка console.log работает нормально, но параметры Second и Third не отображаются в списке.

Что я делаю неправильно? спасибо!

UPDATE

Этот код работает:

changeHandler: function(e) { 
    console.log('In changeHandler'); 
    tmp = []; 
    tmp.push(
     <option key={'some_key2'} value={'some_value2'}>{'Second Option'}</option>, 
     <option key={'some_key3'} value={'some_value3'}>{'Third Option'}</option> 
    ); 
    this.setState({options: tmp}); 
    }, 

Спасибо Илья!

ответ

3

Простое изменение состояния не приведет к обновлению пользовательского интерфейса. Вы должны сказать React, что состояние изменилось, вызвав setState или другие функции, описанные здесь: https://facebook.github.io/react/docs/component-api.html

Смежные вопросы