英文:
React MUI - Operating on dynamically created TextField elements
问题
我尝试动态添加按钮和文本字段对，并使按钮对其相应的文本字段执行某些操作。我的特定用例是创建一个“用户设置”页面，用户可以更改特定帐户信息属性。
以下是一个生成2对文本字段和按钮的最小代码示例。但是，按下任何一个按钮会禁用两个文本字段，而不仅仅是它对应的文本字段：
在上面的示例中，如何使按钮按下后只禁用其关联的文本字段？
我当前的天真方法用于读取动态创建元素的值，是给文本字段分配id属性字段，并操作DOM以读取值（例如，在onClick={(e) => handleChange(e)}方法中使用document.getElementById(e.target.id).value），但这违反了React的原则。
英文:
I am trying to dynamically add pairs of buttons and text fields and have the button perform some action on its corresponding text field. My specific use case is creating a 'User Settings' page where users can change a specific account information property
Here is a minimal code example that generates 2 pairs of text fields and buttons. However, pressing either button disables both text fields rather than its corresponding text field:
export default function FAQ() {
const [disabled, toggleDisabled] = React.useState(false)
const CreateInputPair = () => {
return (
<>
<TextField
disabled={disabled}
/>
<Button
onClick={() => toggleDisabled(!disabled)}
>
Toggle Disabled
</Button>
</>
)
}
return (
<>
<CreateInputPair />
<br />
<CreateInputPair />
</>
);
}
In the above example, how can I make it so that pressing a button only disables its associated text field?
My current and naive approach for reading values of dynamically created elements is to assign id prop fields to the TextField and manipulate the DOM to read the value (ie. having document.getElementById(e.target.id).value inside a onClick={(e) => handleChange(e)} method), but this goes against the principles of React
答案1
得分: 1
将CreateInputPair移动到自己单独的组件中。
const InputPair = () => {
const [disabled, toggleDisabled] = React.useState(false);
return (
<>
<TextField
disabled={disabled}
/>
<Button
onClick={() => toggleDisabled(!disabled)}
>
Toggle Disabled
</Button>
</>
)
}
export default function FAQ() {
return <>
<InputPair /> <br /> <InputPair />
</>;
}
英文:
Move CreateInputPair into its own separate component.
const InputPair = () => {
const [disabled, toggleDisabled] = React.useState(false);
return (
<>
<TextField
disabled={disabled}
/>
<Button
onClick={() => toggleDisabled(!disabled)}
>
Toggle Disabled
</Button>
</>
)
}
export default function FAQ() {
return <>
<InputPair /> <br /> <InputPair />
</>;
}
答案2
得分: 1
import { useState } from "react";
export default function FAQ() {
const [disabled, toggleDisabled] = useState();
const toggleDisabledInput = (id) => {
if (disabled === id) {
toggleDisabled(null);
} else {
toggleDisabled(id);
}
}
console.log(disabled);
const CreateInputPair = ({ id }) => {
return (
<>
<input disabled={disabled === id} />
<button onClick={() => toggleDisabledInput(id)}>Toggle Disabled
</>
);
};
return (
<>
</>
);
}
英文:
I hope this helps
import { useState } from "react";
export default function FAQ() {
const [disabled, toggleDisabled] = useState();
const toggleDisabledInput = (id) => {
if (disabled === id) {
toggleDisabled(null);
} else {
toggleDisabled(id);
}
};
console.log(disabled);
const CreateInputPair = ({ id }) => {
return (
<>
<input disabled={disabled === id} />
<button onClick={() => toggleDisabledInput(id)}>Toggle Disabled</button>
</>
);
};
return (
<>
<CreateInputPair id="1" /> // you can pass id from your db
<br />
<CreateInputPair id="2" />
</>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论