如何禁用只有一个输入字段与复选框?

Question

我想禁用"完成日期";

问题是我动态地创建了这些字段，所以当我试图禁用与之相关的字段时，它会禁用所有其他的"完成日期"我想只禁用前一个字段，而不是所有其他字段。

形象

const [checked, setChecked] = useState(false)    
const [inputList, setInputList] = useState([
{ 
startDate: "Start Date",            
completionDate: "Completion Date:",
inline: true 
}
])
const handleInputChange = (e, index, val) => {
const { name, value } = e.target
setChecked(e.target.checked)    

const list = [...inputList]

list[index][name] = val !== undefined ? val : value 
setInputList(list)
}
const handleRemoveClick = (index) => {
const list = [...inputList]
list.splice(index, 1)
setInputList(list)
}
const handleAddClick = () => {
setInputList([
...inputList,
{ 
startDate: "Start Date",            
completionDate: "Completion Date:",
inline: true 
}
])
}
let embed = {
embed: {
fields: inputList
}
}    
//Form
{inputList.map((x, i) => {                
return (
<>           
<FormControl>
<Box>
<FormLabel htmlFor='startDate'>Start Date:</FormLabel>                      
<Input 
name="startDate"
onChange={(e) => handleInputChange(e, i)}              
type='text' 
placeholder='Start Date' 
/>                                                
</Box>
<Box>
<FormLabel htmlFor='completionDate'>Completion Date:</FormLabel>                        
<Input 
name="completionDate"
isDisabled={checked ? true : false}
onChange={(e) => handleInputChange(e, i)} 
type='text' 
placeholder='Completion Date' 
/>                                                
</Box>                
<Box pt={{ base: '0', md: '2.7rem'}}>                       
<Checkbox  
type="checkbox" 
name="inline" 
checked={x.inline}                                     
onChange={(e) => handleInputChange(e, i, e.target.checked)}
colorScheme='purple'>
<label>Studying</label>
</Checkbox>  
</Box>                                 
</FormControl>           
{inputList.length - 1 === i && (
<Button onClick={handleAddClick}> + New Section </Button> 
)}
{inputList.length !== 1 && (
<Button  onClick={() => handleRemoveClick(i)}>- Remove Section</Button> 
)}                      

</>
)
})} 

Answer 1

您应该将checked添加到inputList对象

const [inputList, setInputList] = useState([
{
startDate: "Start Date",
completionDate: "Completion Date:",
inline: true,
checked: false
}
])
const handleInputChange = (e, index, val) => {
const { name, value } = e.target
let newList = inputList
newList[index]['checked'] = e.target.checked
setInputList(newList)
const list = [...inputList]
list[index][name] = val !== undefined ? val : value
setInputList(list)
}
const handleRemoveClick = (index) => {
const list = [...inputList]
list.splice(index, 1)
setInputList(list)
}
const handleAddClick = () => {
setInputList([
...inputList,
{
startDate: "Start Date",
completionDate: "Completion Date:",
inline: true,
checked: false
}
])
}
let embed = {
embed: {
fields: inputList
}
}
//Form
{
inputList.map((x, i) => {
return (
<>
<FormControl>
<Box>
<FormLabel htmlFor='startDate'>Start Date:</FormLabel>
<Input
name="startDate"
onChange={(e) => handleInputChange(e, i)}
type='text'
placeholder='Start Date'
/>
</Box>
<Box>
<FormLabel htmlFor='completionDate'>Completion Date:</FormLabel>
<Input
name="completionDate"
isDisabled={x.checked}
onChange={(e) => handleInputChange(e, i)}
type='text'
placeholder='Completion Date'
/>
</Box>
<Box pt={{ base: '0', md: '2.7rem' }}>
<Checkbox
type="checkbox"
name="inline"
checked={x.inline}
onChange={(e) => handleInputChange(e, i, e.target.checked)}
colorScheme='purple'>
<label>Studying</label>
</Checkbox>
</Box>
</FormControl>
{inputList.length - 1 === i && (
<Button onClick={handleAddClick}> + New Section </Button>
)}
{inputList.length !== 1 && (
<Button onClick={() => handleRemoveClick(i)}>- Remove Section</Button>
)}
</>
)
})
} 

Answer 2

您的完成日期输入isDisabled属性取决于与所有完成日期输入共享的checked状态。

<Input 
name="completionDate"
isDisabled={checked ? true : false}       //  <--- checked shared state
...
/> 

因此，当您单击任何复选框时，复选状态将由handleInputChange更新，并且所有完成日期输入将处于禁用/启用模式，这取决于最近单击的复选框的复选值。

正如@hossein所说，您需要添加checked属性。那么，让我们开始吧

首先,更新你的inputList初始化:

const [inputList, setInputList] = useState([
{
startDate: undefined,           // to hold startDate value
completionDate: undefined,      // to hold completionDate value
disabled: false,                // to hold completionDate disabled state
checked: false,                 // to hold inline checked state
},
]);

下一步，更新handleInputChange方法:

const handleInputChange = (e, i) => {
const { checked, name, value } = e.target;
setInputList((prevState) => {
if (name === "inline") {
prevState[i].checked = checked;
prevState[i].disabled = checked;  // disabled value follows checked value
} else {
prevState[i][name] = value;
}
return [...prevState];
});
};

其次,更新你的handleAddClick方法:

const handleAddClick = () => {
setInputList((prevState) => {
const newInputs = {
startDate: undefined,
completionDate: undefined,
disabled: false,
checked: false,
};
return [...prevState, newInputs];
});
};

最后，更新onChangeat Checkbox组件:

// from
onChange={(e) => handleInputChange(e, i, e.target.checked)}
// into
onChange={(e) => handleInputChange(e, i)}

在你做了这些更新之后，你的代码应该可以工作了。

下面是最简单的例子:

const { useState } = React;
function App() {
const [inputList, setInputList] = useState([
{
startDate: undefined,
completionDate: undefined,
disabled: false,
checked: false,
},
]);
const handleInputChange = (e, i) => {
const { checked, name, value } = e.target;
setInputList((prevState) => {
if (name === "inline") {
prevState[i].checked = checked;
prevState[i].disabled = checked;
} else {
prevState[i][name] = value;
}
return [...prevState];
});
};
const handleAddClick = () => {
setInputList((prevState) => {
const newInputs = {
startDate: undefined,
completionDate: undefined,
disabled: false,
checked: false,
};
return [...prevState, newInputs];
});
};
const handleRemoveClick = (index) => {
const list = [...inputList];
list.splice(index, 1);
setInputList(list);
};
return (
<div>
<div>App</div>
{inputList.map((input, i) => {
return (
<div key={i}>
<br />
<div>
<label>
Start Date:
<input
name="startDate"
type="text"
onChange={(e) => handleInputChange(e, i)}
placeholder="Start Date"
/>
</label>
</div>
<div>
<label>
Completion Date:
<input
name="completionDate"
type="text"
disabled={input.disabled}
onChange={(e) => handleInputChange(e, i)}
placeholder="Completion Date"
/>
</label>
</div>
<div>
<label htmlFor={`checkbox-${i}`} style={{ cursor: "pointer" }}>
<input
id={`checkbox-${i}`}
name="inline"
type="checkbox"
checked={input.checked}
onChange={(e) => handleInputChange(e, i)}
/>
{`Checkbox-${i}`}
</label>
</div>
<br />
{inputList.length - 1 === i && (
<button onClick={() => handleAddClick()}>+ New Section</button>
)}
{inputList.length !== 1 && (
<button onClick={() => handleRemoveClick(i)}>
- Remove Section
</button>
)}
</div>
);
})}
</div>
);
}
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>