如何从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
          }
          </>
        );
      }
    }