Question

在输入中获取文本的最有效方法是什么？

我知道我可以像这样

R1
        x        y    R1
1  696060 -3327450    66
2  696090 -3327450    71
3  696120 -3327450    69
4  696150 -3327450    65
5  696180 -3327450    67
6  696210 -3327450    68
7  696240 -3327450    67
8  696270 -3327450    68
9  696300 -3327450    69
10 696330 -3327450     0

R2
        x        y    R2
1  696060 -3327450    66
2  696090 -3327450    71
3  696120 -3327450    69
4  696150 -3327450    65
5  696180 -3327450    67
6  696210 -3327450    68
7  696240 -3327450    67
8  696270 -3327450    68
9  696300 -3327450    69
10 696330 -3327450     0

R1
        x        y   R1
1  753810 -3339930   109
2  753840 -3339930   108
3  753870 -3339930   108
4  753900 -3339930   109
5  753930 -3339930   108
6  753960 -3339930   109
7  753990 -3339930   109
8  754020 -3339930   109
9  754050 -3339930   110
10 754080 -3339930   109

R2
        x        y   R2
1  753810 -3339930   109
2  753840 -3339930   108
3  753870 -3339930   108
4  753900 -3339930   109
5  753930 -3339930   108
6  753960 -3339930   109
7  753990 -3339930   109
8  754020 -3339930   109
9  754050 -3339930   110
10 754080 -3339930   109


The output will be like that:
          x        y  R1    R2
1  696060 -3327450    66    NA
2  696090 -3327450    71    NA
3  696120 -3327450    69    NA
4  696150 -3327450    65    NA
5  696180 -3327450    67    NA
6  696210 -3327450    68    NA
7  696240 -3327450    67    NA
8  696270 -3327450    68    NA
9  696300 -3327450    69    NA
10 696330 -3327450     0    NA
11 696060 -3327450    NA    66
12 696090 -3327450    NA    71
13 696120 -3327450    NA    69
14 696150 -3327450    NA    65
15 696180 -3327450    NA    67
16 696210 -3327450    NA    68
17 696240 -3327450    NA    67
18 696270 -3327450    NA    68
19 696300 -3327450    NA    69
20 696330 -3327450    NA     0
21 753810 -3339930   109   109
22 753840 -3339930   108   108
23 753870 -3339930   108   108
24 753900 -3339930   109   109
25 753930 -3339930   108   108
26 753960 -3339930   109   109
27 753990 -3339930   109   109
28 754020 -3339930   109   109
29 754050 -3339930   110   110
30 754080 -3339930   109   109

这不会引起性能问题，因为每次更改输入时都会更新状态（这会导致重新渲染）吗？我应该编写一个shouldComponentUpdate方法来阻止它重新呈现吗？

还有，只有单击按钮时，有没有办法获取输入中的内容？

Answer 1

您可以使用react refs或使用ant-design之类的UI库之一来获得更好的输入和表单管理。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />

        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

Answer 2

是的，每个keypress都会更改状态并重新呈现组件。

但是，由于react在呈现之前会比较虚拟创建的DOM，因此只会根据您的情况将“输入”字段重新呈现给浏览器。

如果您也想避免这种情况，则应创建从PureComponent开始的小型组件。 PureComponent在内部实现shouldComponentUpdate。这样，它将仅重新渲染Input字段，而其他组件保持原样。

Answer 3

您可以使用ref来获取Input的值。这是您如何做到的例子。我已经添加了获取价值和清除价值

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = null;
  }


  getValue = () => {
    console.log(this.textInput.value)
  }

  clearValue = () => {
    this.textInput.value = ""
  }

  render() {

    return (
      <div>
        <input
          type="text"
          ref={el => this.textInput = el} 
        />


        <input
          type="button"
          value="Get Value"
          onClick={this.getValue}
        />

        <input
          type="button"
          value="Clear Value"
          onClick={this.clearValue}
        />
      </div>
    );
  }
}

export default CustomTextInput;

Answer 4

您有一些选择：

使用onBlur代替onChange，这样只有在用户“放弃”输入时才会发生
像this一样使用debounce。

但这取决于该更改的经验和用户界面影响。我的意思是，如果您需要立即产生影响（在用户界面的其他位置显示值），我认为您别无选择。

如果没有，并且您的情况是标准form（或类似form），则可以收听onSubmit并从form中提取值，就像这样：

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  onSubmit = (e) => {
    e.preventDefault();
    const values = Array.from(e.target.elements).reduce((old, current) => {
      if (current.attributes.name) {
        old[current.name] = current.value
      }
      return old;
    }, {})
    this.setState(values);
  }

  render() {
    return (
      <>
        <form onSubmit={this.onSubmit}>
          <input name="name" placeholder="name" />
          <input name="email" placeholder="email" />
          <button>Submit</button>
        </form>
        <hr />
        <pre>
          {
            JSON.stringify(this.state, null, 2)
          }
        </pre>
      </>
    );
  }
}

https://stackblitz.com/edit/react-ewpsla

获得React输入测试的建议

4 个答案: