Question

我在React中制作ToDo List应用。

在表单组件中，我放置了一个复选框。如果选中了复选框并且提交了表单，则我想在“项目”组件上显示“重要”一词。

现在，选中该选项后，它将更新App组件中的状态。但是如何让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>
        );
    }
}

反应/如何选中复选框时通过条件

1 个答案: