onChange函数阻止我更改输入。

huangapple go评论55阅读模式
英文:

onChange function is preventing me to change input

问题

以下是您提供的代码的翻译部分:

const SettingsPage = () => {
const [isNewOpen, setIsNewOpen] = useState(false);
    const toggleNewPopup = () => {
        setIsNewOpen(!isNewOpen);
    }
    const [isEditOpen, setIsEditOpen] = useState(false);
    const toggleEditPopup = () => {
        setIsEditOpen(!isEditOpen);
    }
return (
        <div>
            <div className="container-settings">
                <div className="container-buttons">
                    <button onClick={toggleNewPopup}>Add</button>{isNewOpen && <AccountPopUp
                        name=""
                        phone=""
                        email=""
                        handleClose={toggleNewPopup}
                    />}
                    <button onClick={toggleEditPopup}>Edit</button>{isEditOpen && <AccountPopUp
                        id={account.accountNum}
                        name={account.accountName}
                        phone={account.phoneNum}
                        email={account.email}
                        handleClose={toggleEditPopup}
                    />}
                    <button>Delete</button>
                </div>
                <div className="container-outer-settings">
                    <div className="container-settings">
                        <label htmlFor="dbFile">קובץ בסיס נתונים</label>
                        <input type="url" name="dbFile" id="dbFile" />
                        <label htmlFor="savePath">מיקום שמירת הקבצים</label>
                        <input type="url" name='savePath' id='savePath' />
                    </div>
                    <button>שמירת הגדרות</button>
                </div>
            </div>
        </div>
    )
}
const AccountPopUp = (props) => {
    const [name, setName] = useState("");
    const [phone, setPhone] = useState("");
    const [email, setEmail] = useState("");
    const handleSubmit= () =>{
        axios.put(`http://localhost:9000/api/settings/${props.id}`,{
            name, phone, email
        }).then(props.handleClose)
        .catch((e)=>{
            console.log(e);
        });
    }
    console.log(props);
  return (
    <div className="popup-box">
      <div className="box">
        <label htmlFor="name">Name</label>
        <input type="text" name='name' id='name' value={props.name} onChange={(e)=> setName(e.target.value)}/>
        <label htmlFor="phone">Phone</label>
        <input type="text" name='phone' id='phone' value={props.phone} onChange={(e)=> {
          setPhone(e.target.value); e.preventDefault();}}/>
        <label htmlFor="email">Email</label>
        <input type="text" name='email' id='email' value={props.email} onChange={(e)=> setEmail(e.target.value)}/>
        <button onClick={handleSubmit}>Confirm</button>
        <button onClick={props.handleClose}>Cancel</button>
      </div>
    </div>
  )
}

请注意,这些代码中的注释和一些特殊字符(如")已被移除。如果您需要进一步的帮助或有其他问题,请随时提问。

英文:

I'm trying to set an input's value that's popping up on a button click into an instance threw a handle function.

const SettingsPage = () =&gt; {
const [isNewOpen, setIsNewOpen] = useState(false);
const toggleNewPopup = () =&gt; {
setIsNewOpen(!isNewOpen);
}
const [isEditOpen, setIsEditOpen] = useState(false);
const toggleEditPopup = () =&gt; {
setIsEditOpen(!isEditOpen);
}
return (
&lt;div&gt;
&lt;div className=&quot;container-settings&quot;&gt;
&lt;div className=&quot;container-buttons&quot;&gt;
&lt;button onClick={toggleNewPopup}&gt;Add&lt;/button&gt;{isNewOpen &amp;&amp; &lt;AccountPopUp
name = &quot;&quot;
phone = &quot;&quot;
email = &quot;&quot;
handleClose={toggleNewPopup}
/&gt;}
&lt;button onClick={toggleEditPopup}&gt;Edit&lt;/button&gt;{isEditOpen &amp;&amp; &lt;AccountPopUp
id = {account.accountNum}
name = {account.accountName}
phone = {account.phoneNum}
email = {account.email}
handleClose={toggleEditPopup}
/&gt;}
&lt;button&gt;Delete&lt;/button&gt;
&lt;/div&gt;
&lt;div className=&quot;container-outer-settings&quot;&gt;
&lt;div className=&quot;container-settings&quot;&gt;
&lt;label htmlFor=&quot;dbFile&quot;&gt;קובץ בסיס נתונים&lt;/label&gt;
&lt;input type=&quot;url&quot; name=&quot;dbFile&quot; id=&quot;dbFile&quot; /&gt;
&lt;label htmlFor=&quot;savePath&quot;&gt;מיקום שמירת הקבצים&lt;/label&gt;
&lt;input type=&quot;url&quot; name=&#39;savePath&#39; id=&#39;savePath&#39; /&gt;
&lt;/div&gt;
&lt;button&gt;שמירת הגדרות&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
)
}

The AccountPopUp component:

const AccountPopUp = (props) =&gt; {
const [name, setName] = useState(&quot;&quot;);
const [phone, setPhone] = useState(&quot;&quot;);
const [email, setEmail] = useState(&quot;&quot;);
const handleSubmit= () =&gt;{
axios.put(`http://localhost:9000/api/settings/${props.id}`,{
name, phone, email
}).then(props.handleClose)
.catch((e)=&gt;{
console.log(e);
});
}
console.log(props);
return (
&lt;div className=&quot;popup-box&quot;&gt;
&lt;div className=&quot;box&quot;&gt;
&lt;label htmlFor=&quot;name&quot;&gt;Name&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&#39;name&#39; id=&#39;name&#39; value={props.name} onChange={(e)=&gt; setName(e.target.value)}/&gt;
&lt;label htmlFor=&quot;phone&quot;&gt;Phone&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&#39;phone&#39; id=&#39;phone&#39; value={props.phone} onChange={(e)=&gt; {
setPhone(e.target.value); e.preventDefault();}}/&gt;
&lt;label htmlFor=&quot;email&quot;&gt;Email&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&#39;email&#39; id=&#39;email&#39; value={props.email} onChange={(e)=&gt; setEmail(e.target.value)}/&gt;
&lt;button onClick={handleSubmit}&gt;Confirm&lt;/button&gt;
&lt;button onClick={props.handleClose}&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
)
}

And I cannot change the inputs {"name", "phone", "email"} when I choose update option.

The solutions I run into aren't compatible. Functions like preventDefault, stopPropagation aren't doing the job.
Maybe I was mistaken with my research, but nothing works for me.

答案1

得分: 0

你使用输入值的方法是错误的。有两种可能的方式可以使你的代码工作。在 AccountPopUp 组件中,你正在使用 props.name,而不是改变 props,而是改变状态。

  1. 你可以在输入的 value 属性中使用状态变量,然后改变状态。

  2. 你可以使用 prop 值,但你需要在父组件中定义状态,并使用回调函数来在子组件改变时改变父组件的状态。

英文:

Your approach of using a value for input is wrong. There are 2 possible ways you can make your code work. In AccountPopUp component, you're using props.name, and instead of changing the props you're changing the state.

  1. You can use the state variable in the input's value prop and then change the state.

  2. You can use prop value but you'll have to define your state in the parent component and using callback functions you can change the state of the parent component onchanging the child component.

huangapple
  • 本文由 发表于 2023年6月19日 18:26:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/76505738.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定