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

Question

尝试创建一个可编辑的内联textarea。当 this.state.showTextAreaEdit 为 false 时，我显示

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

否则，我显示:

   

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

此处演示: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>    
    );
  }
}

Answer 1

由于您的返回有多行，因此您需要将其括在括号中:

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