Question

我对ReactJS很新。当<div>设置为contentEditable时，我希望将值放在true内。

const listResults = this.state.results['1'].map((result) =>
  <div key={result.toString()} contentEditable="true">
    {result}
  </div>
);

return (
  <h1> listResults </h1>
  <div> {listResults} </div>
)

我目前正在将一个列表输出到预填充的文本框中，允许用户编辑它们。我想添加一个按钮，一旦点击，捕获所有文本框内的数据。任何人都可以指出我如何捕获变化数据的方向。

值得注意的是，我通过CDN在客户端使用ReactJS。

Answer 1

获取可编辑div的值：

class App extends React.Component {
    constructor(){
        super();
      this.state = {
            arr: [1,2,3,4,5]
      }
      this.change = this.change.bind(this);
  }
  change(e, index){
    let tmpArr = this.state.arr;
    tmpArr[index] = e.target.textContent;
    this.setState({arr: tmpArr})
  }
  render(){
    console.log(this.state);
    return (
      <tr>
          {this.state.arr.map((el, index) => <td key={index} id="test" onBlur={(e) => this.change(e, index)} contentEditable="true">{el}</td>)}
      </tr>
    );
  }
}

https://jsfiddle.net/69z2wepo/84647/

请注意，您不能在同一级别返回两个元素：

return (
  <h1> listResults </h1>
  <div> {listResults} </div>
)

它应该像这样包装：

return (
    <div>
      <h1> listResults </h1>
      <div> {listResults} </div>
    </div>
)

如何从reactjs

1 个答案: