代码之家 › 专栏 › 技术社区 › Monsieur Sam

使用React中的Add按钮添加输入

add input reactjs javascript

-2

Monsieur Sam · 技术社区 · 7 年前

像这样的 this 但有投入。但问题是输入是不同的,所以我不知道怎么做

class Main extends Component {
  constructor(props) {
    super(props);
    this.handleChangeCategorie = this.handleChangeCategorie.bind(this);
    this.state = {
      // I think it should be an array but I don't know
      valueCategorie: ""
    };
  }
  addCategorie(){
    //Something to add input 
  }
  handleSubmit() {
    //Make something with the categorie
  }

  handleChangeCategorie(e) {
    // I don't know if I can use this function for all Input
    this.setState({ valueCategorie: e.target.value });
  }
  render() {
    return <div className="container">              
        <input type="text" value={this.state.valueCategorie} onChange={this.handleChangeCategorie} />
        <Button onClick={this.addCategorie}>Add Input</Button>
        <Button onClick={this.handleSubmit}>Send</Button>
      </div>;
  }
}

我不认为这是同一个问题 here 因为他用一些东西来计数。也许还有别的办法?还是只有这样?

1 回复 | 直到 7 年前

Rohith Murali 7 年前

假设你有一个不同输入的数组,

let inputArray = [<input id="1"/>,<input id="2"/>,<input id="3"/>]

声明状态, 州={

AddFirst=()=>this.setState({inputsRenderingArray:[...this.state.inputsRenderingArray, inputArray[0]]})

AddSecond=()=>this.setState({inputsRenderingArray:[...this.state.inputsRenderingArray, inputArray[1]]})

AddThird=()=>this.setState({inputsRenderingArray:[...this.state.inputsRenderingArray, inputArray[2]]})

在渲染中,单击“添加”按钮,将这些项按入可渲染数组, 渲染(){

return(
   <Button onClick={AddFirst}>Add First</Button>
   <Button onClick={AddSecond}>Add Second</Button>
   <Button onClick={AddSecond}>Add Second</Button>

   {this.state.inputsRenderingArray}
)

}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前