javascript - 自动填写输入框

Question

我有一个 React 应用程序，其中有一个输入字段。我使用引导程序。当用户单击按钮时，我希望自动填充输入字段。所以一开始它应该是空的，因为变量name = ""和按下按钮后名称Max应该在输入字段中，我该怎么做？

我的代码

const Profile = () => {

const [name, setName] = useState();
const onClickBack = () => {
    setName('Max');
}


return (
    <div>

          <div className="form-group">
              <div className="col-xs-4">
                <label for="exampleInputName">Name</label>
                  <input
                         type="text"
                         className={name ? "form-control" : "form-control is-invalid"
                        }
                        placeholder={name}
                       onChange={(event) =>
                       setValueName(event.target.value)
                       }  
                       // text = {name} // not working                    
                                                    
                  />
             </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;

标签： javascriptreactjsbootstrap-4react-bootstrap

Answer 1

这很简单。使用value={name}代替 text={name}

 <input
      type="text"
      className={name ? "form-control" : "form-control is-invalid"}
      placeholder={name}
      value={name} 
      onChange={(event) =>
        setValueName(event.target.value)
      }
  />