Question

我有一个 React 应用程序，其中有一个输入字段。我使用 Bootstrap。当用户单击按钮时，我希望自动填充输入字段。所以一开始它应该是空的，因为变量 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;

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)
      }
  />

Answer 2

如果您希望状态显示在 value={name} 字段内，请使用 input。我还注意到 setValueName() 没有在任何地方定义，用 setName() 替换它。

如果用户单击后退按钮时输入字段为空，您可能希望将输入字段的值更改为 Max。在这种情况下，您应该在设置默认名称之前检查输入是否为空。

const Profile = () => {

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


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

你用错了 input。

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

自动填充输入框

3 个答案: