时间戳

首页 > 解决方案 > 使用一个元素打开可编辑的内联文本区域

javascript - 使用一个元素打开可编辑的内联文本区域

问题描述

当我单击edit打开textarea所有元素的可编辑。如何设置它以使其仅在我单击的元素处打开。

此处演示：https ://stackblitz.com/edit/react-yoevt8

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [],
      showTextAreaEdit: false
    };
  }

  componentDidMount() {
    this.getTodos();
  }

  displayEdit = () => {
    this.setState({
      showTextAreaEdit: true
    })
  }

  getTodos = () => {
    axios({
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: 'GET'    
    })
      .then(res => {    
        this.setState({
          todos: res.data
        });
      })
      .catch(error => {
        console.log(error);
      });
  };

  render() {
    return (
      <ul>
        {this.state.todos.map((todo, index) => {
          return (<li key={todo.id}>
              {this.state.showTextAreaEdit ?
                <span>
                  <textarea>{todo.title}</textarea>
                  <button>Save</button>
                </span> 
                :
                <span>
                  {todo.title}
                  <button onClick={this.displayEdit}>Edit</button>
                </span>
              }
            </li>)
        })}
      </ul>    
    );
  }
}

标签： javascriptreactjs

解决方案

你维持的状态是不够的。然后，您必须维护每个列表项的状态。您可以在列表的每个项目中使用这样的键

{
  id: 1,
  title: '...'
  isEditable: false
}

现在，当您单击编辑按钮时，仅制作该 item isEditable: true，然后textarea根据每个 itemsisEditable键而不是中央showTextAreaEdit键渲染。

推荐阅读