如何在 ReactJS 中"Dynamically move the text area to top of the page by clicking submit button"

我想通过点击提交按钮来执行，文本区域应该移动到页面顶部，删除按钮在右侧。每当我点击提交按钮时，文本区域都应该位于页面顶部，并在右侧添加带有删除按钮的前一个文本区域。我已经附上了我的代码和代码沙盒链接。请帮助我解决此功能。Codesandboxdemo。

import React, { Component } from "react";
class App extends Component {
  constructor() {
    super();
    this.state = {
      count: [],
     
    };
}
handleSubmit(index)
  {
   
  }
 add(e) {
    this.setState({ count: [...this.state.count, ""] });
  }
 handleChange(e, index) {
    const { count } = this.state;
    count[index] = e.target.value;
    this.setState({ count });
  }
render() {
    const {  count } = this.state
    return (
      <div>
        <label>Enter the text</label>
        {count.map((counts, index) => {
          return (
            <div key={index}>
              <input
               
                onChange={(e) => this.handleChange(e, index)}
                value={counts}
              
              />
             
              <button onClick={() => this.handleSubmit(index)}>submit</button>
             
            </div>
          );
        })}
        <button  onClick={(e) => this.add(e)}> Add</button>
      </div>
    );
  }
}
export default App;

.App {
  font-family: sans-serif;
  text-align: center;
}

<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>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <title>React App</title>
</head>
<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

有两种方法可以做到这一点，一种是css方法，另一种是javascript方法，你可以使用一个新的布尔状态，并在点击提交按钮时更改状态，你可以用三元运算符切换，或者你可以使用css类，并在单击提交按钮时进行更改。如果你需要代码告诉我，我会在这里发布

相关内容

最新更新

热门标签：