Javascript 创建可编辑的内联文本区域

正在尝试创建可编辑的内联

文本区域

。当

此.state.showTextAreaEdit

为

false

I显示时

<span>
   <textarea> {todo.title} </ textarea>
   <button> Save </button>
</span>

{todo.title}
拯救

否则，我将显示：

 <span>
   {todo.title}
   <button onClick={this.displayEdit}> Edit </button>
 </span>

{todo.title}
编辑
 

此处演示：

问题没有显示出来。控制台中没有错误

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>    
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
待办事项：[]，
ShowTextArea编辑：false
};
}
componentDidMount（）{
这个。getTodos（）；
}
显示编辑=（）=>{
这是我的国家({
ShowTextArea编辑：true
})
}
getTodos=（）=>{
axios({
网址：'https://jsonplaceholder.typicode.com/todos',
方法：“获取”
})
.然后（res=>{
这是我的国家({
todos:res.data
});
})
.catch（错误=>{
console.log（错误）；
});
};
render（）{
返回(

{this.state.todos.map（（todo，index）=>{
返回

{this.state.showTextAreaEdit？
{todo.title}
拯救
:
{todo.title}
编辑
}

})}

);
}
}
{this.state.todos.map（（todo，index）=>

{this.state.showTextAreaEdit？
{todo.title}
拯救
:
{todo.title}
编辑
}

)}

在渲染时删除地图函数中的返回值
由于返回值有多行，因此需要将其括在括号中：

{this.state.todos.map((todo, index) => {
  return ( // HERE
    <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>
  )
}

{this.state.todos.map（（todo，index）=>{
return（//此处

{this.state.showTextAreaEdit？
{todo.title}
拯救
:
{todo.title}
编辑
}

)
}
这是因为return语句找不到任何要返回的内容。请不要在return语句后放置enter。请尝试以下操作

{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>)
        })}

{this.state.todos.map（（todo，index）=>{
返回（

{this.state.showTextAreaEdit？
{todo.title}
拯救
:
{todo.title}
编辑
}
）
})}
只需将您的代码替换为以下代码：-

我所做的是，我在state上使用了一个新参数，该参数包含所选列表项的id，当您单击edit时，它最初为null。我在函数上传递id，并将其值更改为函数中提供的id

我还替换了您的条件。在这里，我检查所选id是否与列表项的id匹配，它显示文本区域字段，否则只显示简单文本

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import axios from 'axios';

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

  componentDidMount() {
    this.getTodos();
  }

  displayEdit = (id) => {
    this.setState({
      editableTextArea: id
    })
  }

  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.editableTextArea == todo.id ?
                <span>
                  <textarea>{todo.title}</textarea>
                  <button>Save</button>
                </span> 
                :
                <span>
                  {todo.title}
                  <button onClick={()=>{this.displayEdit(todo.id)}}>Edit</button>
                </span>
              }
            </li>
        })}
      </ul>    
    );
  }
}

render(<App />, document.getElementById('root'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
从“axios”导入axios；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
待办事项：[]，
ShowTextArea编辑：false，
editableTextArea:空
};
}
componentDidMount（）{
这个。getTodos（）；
}
显示编辑=（id）=>{
这是我的国家({
editableTextArea:id
})
}
getTodos=（）=>{
axios({
网址：'https://jsonplaceholder.typicode.com/todos',
方法：“获取”
})
.然后（res=>{
这是我的国家({
todos:res.data
});
})
.catch（错误=>{
console.log（错误）；
});
};
render（）{
返回(

{this.state.todos.map（（todo，index）=>{
return

{this.state.editableTextArea==todo.id？
{todo.title}
拯救
:
{todo.title}
{this.displayEdit（todo.id）}>Edit
}

})}

);
}
}
render（，document.getElementById（'root'））；

它在您的演示中非常有效，请欣赏无法使用的代码。
map
需要返回一些东西。您尝试过吗？我认为您应该了解有关箭头函数的更多信息：D const multiplyES6=（x，y）=>x*y；x*y是返回的值您完全正确@AnhTuan这是最干净的方法it@AliAsgherBadshah谢谢你：D不幸的是，我投了主题所有者的一票否决票：但是当我在一个
上单击
编辑时，它会立即打开一个包含所有元素的编辑文本区域。你能帮我吗？你需要问一个问题这是一个不同的问题，因为它与您当前的问题无关。这是因为您对所有元素都有一个状态，而如果您想使其单独工作，则每个元素都应该有不同的状态。@Umbro我发布了答案，请检查它。它解决了您的问题。在您上面提到的demmo中，您刚刚需要o返回
项它将工作，我只是尝试一下。您在上面的代码中编写了它，但没有在您的demmo中尝试一下它对我工作
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import axios from 'axios';

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

  componentDidMount() {
    this.getTodos();
  }

  displayEdit = (id) => {
    this.setState({
      editableTextArea: id
    })
  }

  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.editableTextArea == todo.id ?
                <span>
                  <textarea>{todo.title}</textarea>
                  <button>Save</button>
                </span> 
                :
                <span>
                  {todo.title}
                  <button onClick={()=>{this.displayEdit(todo.id)}}>Edit</button>
                </span>
              }
            </li>
        })}
      </ul>    
    );
  }
}

render(<App />, document.getElementById('root'));