我想根据用户输入的计数创建文本字段。我查了很多相关问题,但找不到我想要的结果。
例如:如果用户输入 5 作为输入。我想创建 5 个文本框来输入 5 个人的姓名和手机。
我怎样才能实现这个目标?
获取计数的文本字段
<GridItem xs={12} sm={12} md={12}>
<TextField
id="sp_Inhouse"
label="Number of Pilots Available "
type="number"
fullWidth
className={classes.textField}
value={this.state.sp_Inhousecount}
error={!!this.state.sp_InhouseError}
helperText={this.state.sp_InhouseError}
onChange={this.handleChangeInhouse}
margin="normal"
required
/>
</GridItem>
尝试添加基于按钮单击的文本框。效果很好。但我想要结果如所解释的那样。
<GridItem xs={12} sm={12} md={12}>
<Button color="primary" onClick={this.handleCreatePilots}>
<AddIcon /> Add Pilots
</Button>
{this.state.inhouse.map((index) => {
return (
<div key={index}>
<TextField
id="sp_Name"
label="Name "
type="number"
fullWidth
/>
<TextField
id="sp_Mobile"
label="Name "
type="number"
fullWidth
/>
</div>
)
})
}
</GridItem>
handleCreatePilots=()=>{
this.setState({
inhouse:[...this.state.inhouse,'']
})
}
最佳答案
循环访问用户输入的数字。
const inputs = [];
for (let i = 1; i <= this.state.total; i++) {
inputs.push(
<input name={`input-${i}`} onChange={this.onChange} />
)
}
渲染输入
render() {
return (
....
{inputs}
...
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
constructor() {
super();
this.state = {
name: 'React',
total: 0,
totalInput: '',
show: false,
};
}
add = () => {
this.setState({
total: this.state.totalInput
})
}
showValues = () => {
this.setState({
show: true
})
}
onChange = (event) => {
this.setState({
[event.target.name]: event.target.value
})
}
render() {
const inputs = [];
for (let i = 1; i <= this.state.total; i++) {
inputs.push(
<input name={`input-${i}`} onChange={this.onChange} />
)
}
return (
<div>
<input onChange={(e) => this.setState({ totalInput: e.target.value})} value={this.state.totalInput} placeholder="Enter Number" />
<button onClick={this.add}>Add</button>
<br />
{inputs}
<br />
<button onClick={this.showValues}>Show Inputs values</button>
{ this.state.show &&
<pre>{JSON.stringify(this.state, null, 4)}</pre>
}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
关于reactjs - React - 基于计数的动态输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56373185/