Реагировать / Как пройти условие, когда установлен флажок

Question

Я создаю приложение ToDo List в React.

В компоненте формы я поставил флажок. Если флажок установлен и форма отправлена, я хочу отобразить слово «Важно» в компоненте «Элемент».

Прямо сейчас, когда проверено, он обновляет состояние в компоненте приложения. Но как я могу сообщить компоненту Item, что флажок установлен?

class App extends React.Component {

   state = { defaultList: todo, checked: false }

    onSubmit = (task) => {        
        this.state.defaultList.push({task});
        this.setState(todo);
    }

    render() {
        return (
            <div>
                <Form 
                    onSubmit = {this.onSubmit}
                    checkCheckBox = {this.handleCheckBox}
                />
                <List 
                    lists = {this.state.defaultList}
                />
            </div>
        );
    }
}

class Form extends React.Component {

    onFormSubmit = (event) => {
        event.preventDefault();

        this.props.onSubmit(this.refs.userInput.value);
        this.refs.userInput.value = "";
    }

    handleCheckClick = () => {
        this.props.setState({ checked: !this.props.state.checked });
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onFormSubmit}>
                    <div>
                        <label>Task</label>
                        <input ref="userInput" />
                        <p className="warning"></p>
                    </div>
                    <div>
                        <input 
                        type="checkbox" 
                        checkCheckBox={this.handleCheckClick} 
                        onChange={this.handleCheckClick} 
                        />
                        <label>Important</label>
                    </div>
                        <button type="submit">ADD</button>
                </form>
            </div>
        );
    }
}

const Item = ({task, priority, checkChecked}) => {
    return (
        <ul>
            <li><b>{task}</b></li>
            <li>
            {checkChecked && <span>{priority}</span>} // Write a if statement here
            </li>
            <li>Delete</li>
        </ul>
    );
}

Answer 1

Я добавил комментарий и отредактировал ваш код. В общем: использовать состояние, чтобы отслеживать состояние вашего компонента не вызывать setstate на реквизит если вам нужно вызвать родительскую функцию, вы должны вызвать как: this.props.functionName

class App extends React.Component {

    constructor(props){
        super(props)
        this.state =  { defaultList: todo, checked: false }
    }


     onSubmit = (task) => {      
         //create a copy of state
         let newState ={ ...this.state.defaultList}
         newState.defaultList.push({task});
         this.setState(newState);
     }

     handleCheckBox = (checked) => {
        if(checked){
          //shou your message}
        else{//hide it}
     }

     render() {
         return (
             <div>
                 <Form 
                     onSubmit = {this.onSubmit}
                     checkCheckBox = {this.handleCheckBox}
                 />
                 <List 
                     lists = {this.state.defaultList}
                 />
             </div>
         );
     }
 }


 class Form extends React.Component {

    constructor(props){
        super(props)
        this.state =  { checkBoxChecked: false }
    }

    onFormSubmit = (event) => {
        event.preventDefault();

        this.props.onSubmit(this.refs.userInput.value);
        this.refs.userInput.value = "";
    }

    handleCheckClick = () => {
        //you can't setState on props
        //this.props.setState({ checked: !this.props.state.checked });
        this.setState({checkBoxChecked: !this.state.checkBoxChecked})
        //now if you want do stuff on parent you can call the parent function
        this.props.handleCheckClick(this.state.checkBoxChecked)

    }

    render() {
        return (
            <div>
                <form onSubmit={this.onFormSubmit}>
                    <div>
                        <label>Task</label>
                        <input ref="userInput" />
                        <p className="warning"></p>
                    </div>
                    <div>
                        <input 
                        type="checkbox" 
                        checked = {this.state.checkBoxChecked}
                        //duplicated handler
                        //checkCheckBox={this.handleCheckClick} 
                        onChange={this.handleCheckClick} 
                        />
                        <label>Important</label>
                    </div>
                        <button type="submit">ADD</button>
                </form>
            </div>
        );
    }
}