如何为每个输入添加一个新组件？答案

【问题标题】：How to add a new component with each input?如何为每个输入添加一个新组件？
【发布时间】：2020-07-08 21:13:44
【问题描述】：

我有一个表格。当我在那里输入内容并单击“提交”时，我希望我的应用程序添加一个新组件，每次单击“提交”时都必须包含这个输入。

export default class AddForm extends Component{
    constructor(props){
        super(props);
        this.state = {
            input: '',
            obj: [],
            
        }
        this.onHandleChange = this.onHandleChange.bind(this);
        this.onHandleSubmit = this.onHandleSubmit.bind(this);
    }

    onHandleChange(e){
        this.setState({
            input: e.target.value
        });
        
    }

   onHandleSubmit(){
        this.state.obj.push(this.state.input);
        this.setState({
            input: ''
        })
   }

   

    render(){
        return(
            <div className = 'adder'>
                <h1 className = 'header'>Enter the type of tasks you need to be done:</h1>
                <div>
                <form>
                    <input className = 'board-add'  onSubmit = {this.onHandleSubmit} onChange = {this.onHandleChange} type = 'search' name = 'textarea' placeholder = 'How shall we call the board?'/>
                    <p><button className = 'cancel'>CANCEL</button>
                    <button onClick = {this.onHandleSubmit} className = 'create'>CREATE</button></p>
                </form>
                </div>
                {this.state.obj.map((item) => <TaskBoard taskType = {item} />)}
            </div> 

        );
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

没有代码真的帮不了你，但是看看这个。 stackoverflow.com/questions/55937254/…
您好，谢谢，我会阅读这篇文章！）我编辑了我的问题并添加了我的代码。如果不打扰您，您现在可以看一下我的代码吗？提前非常感谢:)
检查下面的答案希望这能回答你的问题

标签： reactjs frontend

【解决方案1】：

   this.state.obj.push(this.state.input);

^ 这在 React 中不是很好的做法。而是这样做

  obj: [...this.state.obj, this.state.input],

有关... 的更多信息，请查看下面的链接

https://medium.com/coding-at-dawn/how-to-use-the-spread-operator-in-javascript-b9e4a8b06fab

还有

您在输入字段上没有value 属性，因此在执行提交后您将无法重置该字段。

  <input
    className="board-add"
    onSubmit={this.onHandleSubmit}
    onChange={this.onHandleChange}
    type="search"
    name="textarea"
    value={this.state.input}
    placeholder="How shall we call the board?"
  />

代码沙盒

https://codesandbox.io/s/adoring-elbakyan-69hth?file=/src/App.js:0-1459

希望这能回答你的问题。

AddForm.js

import React from "react";
import "./styles.css";
import TaskBoard from "./Taskboard";
export default class Addform extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      arr: []
    };
    this.onHandleChange = this.onHandleChange.bind(this);
    this.onHandleSubmit = this.onHandleSubmit.bind(this);
  }

  onHandleChange(e) {
    this.setState({
      input: e.target.value
    });
  }

  onHandleSubmit(e) {
    e.preventDefault();

    this.setState({
      arr: [...this.state.arr, this.state.input],
      input: ""
    });
  }

  render() {
    console.log(this.state.arr);
    return (
      <div className="adder">
        <h1 className="header">Enter the type of tasks you need to be done:</h1>
        <div>
          <form>
            <input
              className="board-add"
              onSubmit={this.onHandleSubmit}
              onChange={this.onHandleChange}
              type="search"
              name="textarea"
              value={this.state.input}
              placeholder="How shall we call the board?"
            />
            <p>
              <button className="cancel">CANCEL</button>
              <button onClick={this.onHandleSubmit} className="create">
                CREATE
              </button>
            </p>
          </form>
        </div>
        {this.state.arr.map(item => (
          <TaskBoard taskType={item} />
        ))}
      </div>
    );
  }
}

Taskboard.js

import React from "react";

export default function TaskBoard(props) {
  return <div style={{ color: "tomato" }}> {props.taskType}</div>;
}

【讨论】：