我正在使用反应表，其中我基于对文本字段的输入来存储值。但是，问题在于表行是可编辑的。我要修复它。我在表数据中使用输入来添加所需的所有属性。我正在为表使用material-ui核心和引导程序。
这是我的代码：
export class KPIDetails extends Component {
state = {
rows: [],
idx: []
};
continue = e => {
e.preventDefault();
this.props.nextStep();
};
back = e => {
e.preventDefault();
this.props.prevStep();
};
handleChangeRows = idx => e => {
const { name, value } = e.target;
const rows = [...this.state.rows];
rows[idx] = {
[name]: value
};
this.setState({
rows
});
};
//2
handleAddRow = () => {
const item = {
KPI_Before: "",
UOM_Before: "",
Base_Before: "",
Target_Before: "",
dateTime: ""
};
this.setState({
rows: [...this.state.rows, item]
});
};
//3
handleRemoveRow = () => {
this.setState({
rows: this.state.rows.slice(0, -1)
});
};
setDate = dateTime => this.setState({ dateTime });
deleteRow = index => {
var rows = [...this.state.rows];
rows.splice(index, 1);
this.setState({ rows });
};
render() {
const { values, handleChange } = this.props;
const {
values: {
Title,
Details,
What,
Why,
How,
Status,
Cost,
Benefits,
Kpi_Before,
Kpi_After,
UOM_Before,
Base_Before,
Target_Before,
Time,
dateTime
}
} = this.props;
return (
<MuiThemeProvider theme={theme}>
<React.Fragment>
<div className={useStyles.root}>
<AppBar position="static">
<Toolbar>
<Typography
gutterBottom
align="center"
style={{ width: "100%", alignItems: "center" }}
>
KPI Before Implementation
</Typography>
</Toolbar>
</AppBar>
</div>
<br />
<br />
<Grid container>
<Grid item xs={6}>
<TextField
label="KPI"
id="Kpi_Before"
variant="outlined"
size="small"
placeholder="Enter the KPI"
onChange={handleChange("Kpi_Before")}
defaultValue={values.Kpi_Before}
style={{ width: "80%" }}
/>
</Grid>
<Grid item xs={6}>
<FormControl style={{ width: "80%" }} size="small">
<InputLabel
htmlFor="UOM_Before"
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
>
UOM
</InputLabel>
<Select
labelId="UOM_Before"
name="name"
onChange={handleChange("UOM_Before")}
defaultValue={values.UOM_Before}
variant="outlined"
inputProps={{
id: "UOM_Before"
}}
>
<MenuItem value="Nos">Nos</MenuItem>
<MenuItem value="Percentage">Percentage</MenuItem>
<MenuItem value="Metric">Metric</MenuItem>
</Select>
</FormControl>
</Grid>
</Grid>
<br />
<br />
<br />
<br />
<Grid container>
<Grid item xs={6} direction="row" alignItems="center">
<table
className="table table-bordered table-hover"
id="tab_logic"
>
<thead>
<tr>
<th className="text-center"> # </th>
<th className="text-center"> KPI </th>
<th className="text-center"> UOM </th>
<th className="text-center"> Base </th>
<th className="text-center"> Target </th>
<th className="text-center"> Target Date </th>
<th className="text-center"> Delete Row </th>
</tr>
</thead>
<tbody>
{this.state.rows.map((item, idx) => (
<tr id="addr1" key={idx}>
<td>{idx}</td>
<td>
<input
type="text"
name="Kpi_Before"
defaultValue={Kpi_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="UOM_Before"
defaultValue={UOM_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="Base_Before"
defaultValue={Base_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="Target_Before"
defaultValue={Target_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="Target_Before"
defaultValue={dateTime}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<MuiThemeProvider theme={redTheme}>
<Button
onClick={this.deleteRow.bind(this)}
variant="outlined"
index={idx}
color="primary"
size="small"
style={styles.button}
>
-
</Button>
</MuiThemeProvider>
</td>
</tr>
))}
</tbody>
</table>
</Grid>
</Grid>
<br />
<br />
<br />
<br />
<Grid
container
direction="row"
justify="left"
alignItems="left"
style={{ marginLeft: "5%" }}
>
<Button
variant="contained"
color="primary"
size="small"
onClick={this.continue}
style={{ marginLeft: "10%" }}
style={styles.button}
>
Continue
</Button>
<Button
variant="contained"
color="default"
size="small"
style={styles.button}
onClick={this.back}
>
Back
</Button>
</Grid>
</React.Fragment>
</MuiThemeProvider>
);
}
}
const theme = createMuiTheme({
palette: {
primary: blue,
secondary: purple
},
status: {
danger: "orange"
}
});
const styles = {
button: {
margin: 5,
verticalAlign: "bottom"
}
};
export default KPIDetails;
此表的代码：我在项目中使用了material-ui核心，但在这里使用了引导表
<Grid container>
<Grid item xs={6} direction="row" alignItems="center">
<table
className="table table-bordered table-hover"
id="tab_logic"
>
<thead>
<tr>
<th className="text-center"> # </th>
<th className="text-center"> KPI </th>
<th className="text-center"> UOM </th>
<th className="text-center"> Base </th>
<th className="text-center"> Target </th>
<th className="text-center"> Target Date </th>
<th className="text-center"> Delete Row </th>
</tr>
</thead>
<tbody>
{this.state.rows.map((item, idx) => (
<tr id="addr1" key={idx}>
<td>{idx}</td>
<td>
<input
type="text"
name="Kpi_Before"
defaultValue={Kpi_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="UOM_Before"
defaultValue={UOM_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="Base_Before"
defaultValue={Base_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="Target_Before"
defaultValue={Target_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="Target_Before"
defaultValue={dateTime}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<MuiThemeProvider theme={redTheme}>
<Button
onClick={this.deleteRow.bind(this)}
variant="outlined"
index={idx}
color="primary"
size="small"
style={styles.button}
>
-
</Button>
</MuiThemeProvider>
</td>
</tr>
))}
</tbody>
</table>
</Grid>
</Grid>
大家好，答案是输入字段为只读