Semantic TextArea не редактируется с исходным текстом

Question

React Semantic - TextArea

У меня есть начальное значение, которое отображается в textArea, но оно больше не редактируется.

Любое решение?

Пример кода:

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

Answer 1

Для этой цели вы можете использовать состояние

    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)