自动填写输入框答案

【问题标题】：Fill Inputfield automatically自动填写输入框
【发布时间】：2021-08-01 12:19:29
【问题描述】：

我有一个 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;

【问题讨论】：

标签： javascript reactjs bootstrap-4 react-bootstrap

【解决方案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)
      }
  />

【讨论】：

【解决方案2】：

你用错了input。

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

【讨论】：

【解决方案3】：

如果您希望在input 字段中显示状态，请使用value={name}。我还注意到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>

【讨论】：