如何在reactjs中“动态添加/编辑/取消/ textarea”

问题描述

我是新来的反应者，我不知道如何在文本区域上执行动态添加，编辑和取消操作。我有动态数组，我想对每个文本区域分别执行编辑和取消操作。如果单击“编辑”按钮，则鼠标光标应指向特定的文本框，并且它将变为可编辑模式。如果单击取消按钮，则特定的文本区域应变为不可编辑的模式。 codesandboxdemo请运行codesandox中的代码，并提供解决方案

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,rootElement
);

App.js

import React,{ Component } from "react";


class App extends Component {
  constructor() {
    super();
    this.state = {
      
      count: [],disabled: false
    };
    this.newText = {};
   this.handleEdit = this.selectText.bind(this);
  }
  handleCancel(e,index) {
    this.setState({disabled:true})
  } 
  handleRemove(index)

  {
    this.state.count.splice(index,1)
     this.setState({count: this.state.count})
    
  }
  selectText(e,index) {
    newText = this.state.count[index];
     console.log(newText);
    this.newText.select();
 }

  add(e) {
   
    this.setState({ count: [...this.state.count,""],disabled:false});
  }
  handleChange(e,index) {
    this.state.count[index] = e.target.value;
    this.setState({ count: this.state.count });
  }

  render() {
    return (
      <div>
        <label>Enter the text</label>
        {this.state.count.map((counts,index) => {
          return (
            <div key={index}>
               
              <input
              
              ref={(newText) => (this.newText = newText)}
                onChange={(e) => this.handleChange(e,index)}
                value={counts}
               
                disabled = {(this.state.disabled)? "disabled" : ""}
                
               
              />
              <button    onClick={(e) => this.handleEdit(e,index)}>Edit</button>
              <button    onClick={() => this.handleRemove(index)}>Remove</button>
              <button  onClick = {(e) =>this.handleCancel(e,index)}> cancel  </button>
            </div>
          );
        })}
        <button  onClick={(e) => this.add(e)}> Add</button>
      </div>
    );
  }
}
export default App;

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

`] 2

解决方法

我只是尝试为您这样做。这不是一个完整的答案（只是为了确保我不会用汤匙喂你，但这是一种可能的方法）。告诉我这可行吗？

import React,{ useState } from "react";
import "./styles.css";

const App = () => {
  const [Value,setValue] = useState("");
  const [EditMode,setEditMode] = useState(false);
  const toggleEditMode = () => setEditMode(!EditMode);
  return EditMode ? (
    <input
      type="text"
      value={Value}
      onChange={(e) => setValue(e.target.value)}
      onBlur={toggleEditMode}
    />
  ) : (
    <span onClick={toggleEditMode}>{Value}</span>
  );
};

export default App;

单击，它将使其可编辑。出来并显示更新的值。

代码沙箱： https://c4fog.csb.app/

,

这是App.js的完整工作代码

import React,{ Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: [],disabled: [],};

    this.references = []
  }

  handleRef(r,index) {
    this.references[index] = r
  }

  handleCancel(e,index) {
    const { disabled } = this.state;
    disabled[index] = true
    this.setState({ disabled })
  }

  handleRemove(index)
  {
    this.state.count.splice(index,1)
    this.setState({count: this.state.count})
  }

  handleEdit(e,index) {
    const { disabled } = this.state;
    disabled[index] = false
    this.setState({ disabled },() => {
      this.references[index].focus()
    })
 }

  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 { disabled,count } = this.state
    return (
      <div>
        <label>Enter the text</label>
        {count.map((counts,index) => {
          return (
            <div key={index}>
              <input
                ref={(newText) => this.handleRef(newText,index)}
                onChange={(e) => this.handleChange(e,index)}
                value={counts}
                disabled ={disabled[index]}
              />
              <button onClick={(e) => this.handleEdit(e,index)}>Edit</button>
              <button onClick={() => this.handleRemove(index)}>Remove</button>
              <button onClick={(e) =>this.handleCancel(e,index)}>Cancel</button>
            </div>
          );
        })}
        <button  onClick={(e) => this.add(e)}> Add</button>
      </div>
    );
  }
}
export default App;