输入字段中的 if 语句答案

【问题标题】：If statement within an input field输入字段中的 if 语句
【发布时间】：2021-05-10 18:18:59
【问题描述】：

我正在使用带有 React 的 Bootstrap，在 input <input ... readonly/> 字段中有一个选项可以设置 readonly，现在我有一个输入字段设置为 readonly。但是，当用户单击按钮时，我希望只读模式消失并且用户能够使用该输入字段。但是，我的 if 语句不起作用。最好的方法是什么？

我尝试了什么

{ clicked ?
   readOnly : null
}

我的代码

const Profile = () => {

const [clicked, setClicked] = useState(true);
const onClickBack = () => {
    setClicked(false);
}


return (
    <div>

          <div className="form-group">
              <div className="col-xs-4">
                <label for="exampleInputName">Name</label>
                  <input
                         type="text"
                         className="form-control" 
                         placeholder="Name"
                      // THIS IS WRONG  ↓                            
                      { clicked ?
                            readOnly : null
                      }
                      // THIS IS WRONG  ↑                              
                                                    
                  />
             </div>
           </div>
           <button
              type="button"
              id="submit"
              name="submit"
              className="btn btn-primary submit-button ml-5"
              onClick={onClickBack}
               >
              Back
           </button>

    </div>
);
};

export default Profile;

【问题讨论】：

标签： reactjs if-statement react-bootstrap

【解决方案1】：

这应该可以工作...

<input readOnly={!clicked}/>

【讨论】：