在onClick事件后，React中的条件渲染无法正常工作

Question

我试图根据按钮单击事件有条件地显示/隐藏一组输入字段。 如果单击该按钮，则showExtraDetails div的值将在true和false之间切换。

这是我尝试过的：

state = {
        ItemName: '',
        ItemPrice:'',
        ItemDate: '',
        ItemPlace: '',
        ItemType: '',
    }


/*On hitting submit button, I'm logging the state and resetting the form fields after the state was stored in to newArray after appending*/


handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state);
    newArray = [...newArray, this.state];
    console.log(newArray)
    this.setState({
        ItemName: '',
        ItemPrice:'',
        ItemDate: '',
        ItemPlace: '',
        ItemType: '',
    })
}


/*When the input fields change, I'm updating the state*/

change =e =>{
    // this.props.onChange({[e.target.name]:e.target.value})
    this.setState({
        [e.target.name]:e.target.value
    })
}

/* toggling the showExtraDetails value after button was hit */

addExtraFoodDetails=() =>{
    // e.preventDefault()
    showExtraDetails = !showExtraDetails
    console.log(showExtraDetails)
    // e.preventDefault()
}


render(){
        return(
            <div>
                <h5>Add Item</h5>
                <form onSubmit={e => this.handleSubmit(e)}>
                    <input type="text" name="ItemName" placeholder="Enter the Item name" 
                    value={this.state.ItemName}
                    onChange={e=> this.change(e)}
                    />
                    <input type="number" name="ItemPrice" placeholder="Enter the item price" 
                        value={this.state.ItemPrice}
                        onChange={e=>this.change(e)}
                    />
                    <input type="date" name="ItemDate"
                        value={this.state.ItemDate}
                        onChange={e=>this.change(e)}
                    />
                    <br/>
                    <input type="submit" name="submitItem" value="Save" />
                </form>
                <button onClick={this.addExtraDetails}>Add extra details</button>
                <br/>
                {showExtraDetails ? 
                (<div>
                    <input type="text" name="ItemPlace" value={this.state.ItemPlace}/>
                    <select name="ItemType" value={this.state.ItemType}>
                        <option value="none" disabled>--Select--</option>
                        <option value="type1">Type1</option>
                        <option value="type2">Type2</option>
                        <option value="type3">Type3</option>
                        <option value="others">Others</option>
                    </select>
                </div>) : null
                }

                <br/>
                <ul>
                    {newArray.map(item => <li>{item.ItemName}</li>)}
                </ul>
            </div>
        )
    }

但是，当我点击“添加其他详细信息”按钮时，切换后我只能看到showExtraDetails的值为true/false ，但是div不会随着显示/隐藏其他字段而更新。

我在这里想念什么吗？ 处理此问题的最佳方法是什么？ 我见过ngIf可以做到这一点。 但是我在React中没有看到这样的效果。 通过切换div的ID，我得到了一些使用CSS样式的建议。 但是我正在尝试应用特定于React的东西。

谢谢。

Answer 1

很有可能，react不会重新渲染。 我建议将showExtraDetails置于状态中，并更新此状态变量以引起重新渲染，从而使组件正确切换。