的className當使用「的addItem」

Question

我使用addItem一個值從另一個組件

我將它添加到this.state.movies添加到列表中應用。看起來，然而它有應用於它的不活動/結果className。

如何確定哪種樣式適用於尚未出現的項目（即使用addItem）？謝謝

Codesandbox的完整例子就在這裏。添加movie到列表中，你會看到它得到應用stying：https://codesandbox.io/s/3OGK2pP9

父組件在哪裏添加的項目創建的項目

class CreateNew extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: '', 
     genres: '', 
    }; 
    } 
    handleSubmit1 = (e, value) => { 
    e.preventDefault(); 
    this.props.addItem(this.state); 
    }; 
    onChange = e => { 
    this.setState({ 
     value: { name: e.target.value }, 
     genres: [{ name: 'Test', type: 1 }, { name: 'Foo', type: 10 }], 
    }); 
    }; 
    render() { 
    const { value, genres } = this.props; 
    return (
     <form onSubmit={this.handleSubmit1}> 
     Add a new movie 
     <input onChange={this.onChange} value={value} type="text" /> 
     <button type="submit">Add</button> 
     </form> 
    ); 
    } 
} 

Answer 1

是有關

<CreateNew addItem={item => this.setState({ movies: [{ name: item.value.name, genres: item.genres }].concat(movies,), })} /> 

子組件過濾我的const x而不是我的狀態this.state.movies。我把它從const filteredResults = andFilter({x}, Object.keys(selectedFilters));改爲const過濾結果=和過濾器{{this.state.movi​​es}，Object.keys（selectedFilters））;