reactjs - 具有条件渲染和评估值的 jsx 表达式

Question

class AddOption extends React.Component{
    constructor(props){
        super(props)
        this.handleAddOption = this.handleAddOption.bind(this)
        this.state = {
            error: ''
        }
    }    
handleAddOption(e){
        e.preventDefault()

        const option = e.target.textinput.value;
         // THE FOLLOWING LINE TAKES MY OPTION AND PASSED THROUGH A METHOD 
         //COMMIG FROM PARENT IT VALUATES AND RETURNS THE RESULT
        const error =  this.props.handleAddOption(option);

        this.setState(()=>({error}))
        {!this.state.error && e.target.textinput.value =''}

    }
  render(){
        return (
            <div>
             {this.state.error && <p>{this.state.error}</p>}
            <form onSubmit={this.handleAddOption}>
            <label>textinput:</label>
            <input type="text" name="textinput"/>
            <button>Add Options</button>
            </form>
            </div>
        )
    }

1) 在提交我的表单时调用我的 handleAddOption 的以下代码收到以下错误，这是预期的

2）我知道我可以使用

if(this.state.error){
            e.target.textinput.value = ''
        }

3）但我想知道为什么它失败了？

4) 根据 jsx，我们可以在 {} 中保留任何 javascript 表达式，所以我使用赋值表达式作为表达式的第二个参数

5）我想它会编译成{true && expression}，我错过了什么以及为什么 {!this.state.error && e.target.textinput.value = ''}失败

6) {!this.state.error && {e.target.textinput.value = ''}}仍然显示错误

标签： reactjsconditional-statementsjsx