如何在ReactJS循环生成的列表中启用/禁用表单元素?

Question

我在react中有一个循环来生成一个输入文本和选择列表，特别是两个输入和每行的选择

const getRow = (type, key, defaultValues = {}) => {
return (
<Row className="mb-3" key={type + key}>
<Col xs={3}>
<Form.Group>
<Form.Label>Name</Form.Label>
<Form.Control
name={`${type}name${key}`}
className={`${type}name`}
defaultValue={defaultValues ? defaultValues.name : null}
type="text"/>
</Form.Group>
</Col>
<Col>
<Form.Group>
<Form.Label>Values</Form.Label>
<Form.Control
name={`${type}value${key}`}
className={`${type}value`}
defaultValue={defaultValues ? defaultValues.value : null}
type="text"/>
</Form.Group>
</Col>
<Col xs={3}>
<Form.Group>
<Form.Label>Type</Form.Label>
<Form.Select
name={`${type}type${key}`}
className={`${type}type`}
defaultValue={defaultValues ? defaultValues.type : null}
>
<option value="single">Single</option>
<option value="multi">Multi</option>
<option value="date">Date</option>
</Form.Select>
</Form.Group>
</Col>
</Row>

我要做的是在类型选择中选择日期时禁用第二个输入文本(值)。关键是要禁用同一行中的那个。

我该怎么做呢?

Answer 1

我不知道你的关键变量有什么数据?但我认为它们是独一无二的，因为你将它们命名为key。您可以创建一个对象来保存disableelements的状态，如下所示:

{
textvalueMyCoolKey: true,
textValueMyThirdCoolKey: true 
}

然后检查被禁用的元素是否在该对象中。它看起来是这样的。你没有发布太多的代码，所以我不能给你一个组件，但这告诉你的想法:

const [disabledElements, setDisabledElements] = useState({});
const setDisabledText = (e, key) => {
const value = e.target.value;
const disabled = value === 'date';
setDisabledElements({...disabledElements, [key]: disabled});
}
useEffect(() => {
}, [disabledElements]);
const getRow = (type, key, defaultValues = {}) => {
return (
<Row className="mb-3" key={type + key}>
<Col xs={3}>
<Form.Group>
<Form.Label>Name</Form.Label>
<Form.Control
name={`${type}name${key}`}
className={`${type}name`}
defaultValue={defaultValues ? defaultValues.name : null}
type="text"/>
</Form.Group>
</Col>
<Col>
<Form.Group>
<Form.Label>Values</Form.Label>
<Form.Control
name={`${type}value${key}`}
className={`${type}value`}
disabled={disabledElements[`${type}value${key}`]}
defaultValue={defaultValues ? defaultValues.value : null}
type="text"/>
</Form.Group>
</Col>
<Col xs={3}>
<Form.Group>
<Form.Label>Type</Form.Label>
<Form.Select
name={`${type}type${key}`}
className={`${type}type`}
onChange={(e) => setDisabledText(e, `${type}value${key}`)}
defaultValue={defaultValues ? defaultValues.type : null}
>
<option value="single">Single</option>
<option value="multi">Multi</option>
<option value="date">Date</option>
</Form.Select>
</Form.Group>
</Col>
</Row>
)
}

我还假定，如果用户取消选择日期选项，您希望从文本字段中删除禁用状态。