输入字段中的 If 语句

Question

我在 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;

Answer 1

这应该有效...

<input readOnly={!clicked}/>

输入字段中的 If 语句

If statement within an input field

if-statement

reactjs

react-bootstrap