语义TextArea不能使用初始文本进行编辑

Question

React Semantic - TextArea

我有初始值，它在textArea中显示但不再可编辑。

有解决方案吗

codepen示例：

[1]: https://codepen.io/as3script/pen/VRepqv?editors=1010

Answer 1

您可以使用state来实现此目的

    const { 
      TextArea,
    } = semanticUIReact

    class App extends React.Component {
      constructor(props){
        super(props);
        this.state={
          value: "initial text which I would like to edit" // set initial state
        }
      }

      onChange(e){
        this.setState({ value: e.target.value })
      }

      render() {
        const { value } = this.state;

        return (
          <div>
            <TextArea 
               rows={4} 
               style={{'width': '550'}} 
               onChange={(e) => this.onChange(e)} 
               value={value} //render changed state
             /> 
          </div>
        )
      }
    }

    // ----------------------------------------
    // Render to DOM
    // ----------------------------------------
    const mountNode = document.createElement('div')
    document.body.appendChild(mountNode)

    ReactDOM.render(<App />, mountNode)