在React JS中,要实现点击添加来自字段的新输入时,将"add"按钮固定在顶部,可以通过以下步骤实现:
constructor(props) {
super(props);
this.state = {
inputs: []
};
}
render() {
return (
<div>
{this.state.inputs.map((input, index) => (
<input key={index} value={input} onChange={this.handleInputChange} />
))}
<input value="" onChange={this.handleInputChange} />
<button onClick={this.handleAddClick}>Add</button>
</div>
);
}
handleInputChange = (event, index) => {
const newInputs = [...this.state.inputs];
newInputs[index] = event.target.value;
this.setState({ inputs: newInputs });
}
handleAddClick = () => {
const newInputs = [...this.state.inputs, ""];
this.setState({ inputs: newInputs });
}
通过以上步骤,就可以在React JS中实现点击添加来自字段的新输入时,将"add"按钮固定在顶部的功能。这样,每次点击"add"按钮时,都会在顶部添加一个新的输入字段,并保持"add"按钮的固定位置。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云