React.js State Issue

Question

У меня есть нижний jsfiddle Я пытаюсь отфильтровать записи, поэтому, когда выбрана категория, я хочу показывать результаты только для этой категории. Не уверен, что я пропал без вести с государствами.

https://jsfiddle.net/kkhwabzr/

var App = React.createClass({ 
    render: function() { 
     return (
     <div> 
      <Instructions /> 
      <h1>Requests</h1> 
     </div> 
     ); 
    } 
}); 

Answer 1

Вы должны контролировать состояние выбора из главного компонента App. Прямо сейчас вы отслеживаете выбор в компоненте MySelect. Это означает, что компонент App не имеет этой информации и не может передать его компоненту DisplayRecords в качестве опоры.

Правильный способ сделать это сохранить выбор в качестве переменной состояния в компоненте приложения, и передать как его значение и обработчик OnChange в качестве реквизита для компонента MySelect:

getInitialState: function() { 
    return { selected: "All Requests" } 
}, 

onChange:function(e){ 
    this.setState({selected: e.target.value}) 
}, 

render: function() { 
    return (... 
     <MySelect selected={this.state.selected} onChange={this.onChange} /> 
     <DisplayRecords records={this.props.data.filter(this.filterRecord)} 
    ...) 
} 

Как указывалось ранее , вы можете использовать фильтр, чтобы получить правильные записи, но вы также должны учитывать в случае «все запросы», где вы хотите, чтобы вернуть все записи, а значит:

filterRecord: function(record) { 
    if(this.state.selected === null) return true; 
    return (record.status === this.state.selected || this.state.selected === "All Requests"); 
} 

Смотрите jsfiddle для рабочего примера ваш код: https://jsfiddle.net/kkhwabzr/3/

Я изменил его как можно меньше, чтобы вы могли понять, как код был изменен между вашей и рабочей версией. Обратите внимание, что я также добавил теги в соответствии с рекомендациями при использовании React (Removing row from table results in TypeError) и изменил значения {value: ...}, которые должны быть согласованы между состоянием record.status и состояния компонента.