如何從Reactjs的input \\ textArea獲取“中斷”？

Question

在項目中，我從e.target獲取input \\ text-area值，將它們寫入組件狀態並發送請求。 但我還需要發送文本分隔符（'\\ n'）。 如何獲得它們，寫狀態並發送響應？

Answer 1

具有一個名為handleChange的函數，並將其作為onChange屬性傳遞到您的輸入。

<input onChange={handleChange} />

默認情況下，將向您的函數傳遞事件參數，您只需定義它即可。

handleChange(event) {
    this.setState({input_value: event.target.value})
}

react文檔可能是我見過的任何庫中最好的文檔。

https://reactjs.org/docs/handling-events.html

不確定發送文本中斷的意思。

Answer 2

您可以使用CSS保留換行符：

white-space: pre-wrap;

所以在反應中它看起來像這樣：

    import React from 'react'
    export default class Text extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          value: '',
          submit: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        this.setState({value: event.target.value});
      }

      handleSubmit(event) {
        this.setState({submit: true})
        event.preventDefault();
      }

      render() {

        const submittedText = 
            this.state.submit ? <textarea id="" name="" cols="30" rows="10">{this.state.value}</textarea>:null
        return (
          <>
          <form onSubmit={this.handleSubmit}>
            <label>
              TEXT:
              <textarea style={{'whiteSpace':'preWrap'}} type="text" value={this.state.value} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" />
          </form>
          {
            submittedText
          }
          </>
        );
      }
    }