Question

嗨，我写了一个小组件

export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.onKeyPress = this.onKeyPress.bind(this);
    this.state = { tags: [], value: "" };
  }
  onKeyPress(e) {
    if (e.key === "Enter") {
      this.setState({ tags: [...this.state.tags, e.target.value], value: "" });
    }
  }

  render() {
    return (
      <div>
        <div styleName="fieldset width-95">
          <label>Tags</label>
          <div>
            <div>
              {this.state.tags.map(tag => (
                <span>{tag}</span>
              ))}
            </div>
            <input
              type="text"
              onKeyPress={this.onKeyPress}
              value={this.state.value}
            />
          </div>
        </div>
      </div>
    );
  }
}

第一次输入后输入

。它会创建一个标签，但此后，我无法在输入字段中输入任何内容。谁能解释一下如何启用键入功能，以便我可以创建另一个标签。

Answer 1

您还需要一个onChange处理程序来更新用户输入的state。否则this.state.value将永远不会更新。

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.onKeyPress = this.onKeyPress.bind(this);
    this.state = { tags: [], value: "" };
  }
  onKeyPress(e) {
    if (e.key === "Enter") {
      this.setState({ tags: [...this.state.tags, e.target.value], value: "" });
    }
  }

  handleOnChange = e => {
    this.setState({
      value: e.target.value
    });
  };

  render() {
    return (
      <div>
        <div styleName="fieldset width-95">
          <label>Tags</label>
          <div>
            <div>
              {this.state.tags.map(tag => (
                <span>{tag}</span>
              ))}
            </div>
            <input
              type="text"
              onChange={this.handleOnChange}
              onKeyPress={this.onKeyPress}
              value={this.state.value}
            />
          </div>
        </div>
      </div>
    );
  }
}

查看有效的沙箱：https://codesandbox.io/s/serene-https-t02h2

Answer 2

您可以尝试下面的代码。并删除在状态上设置的值。并使用onChange方法。

      import React, { Component } from 'react';

    export default class TextInput extends React.Component {
    constructor(props) {
      super(props);
      this.onKeyPress = this.onKeyPress.bind(this);
      this.state = { tags: [] };
     }
     onKeyPress(e) {
      if (e.key === "Enter") {
        this.setState({ tags: [...this.state.tags, e.target.value], value: 
        e.target.value });
        console.log("tag:",this.state.tags)
      }
    }

    handleInputChange = (event) => {
        this.setState({ [event.target.name]: event.target.value });
      };

    render() {
      return (
        <div>
          <div styleName="fieldset width-95">
            <label>Tags</label>
            <div>
              <div>
                {this.state.tags.map(tag => (
                  <span >{tag}</span>
                ))}
              </div>
              <input
                type="text"
                onKeyPress={this.onKeyPress}
                name="demo"
                value={this.state.value}
                onChange={this.handleInputChange}
              />
            </div>
          </div>
        </div>
       );
     }
    }

Answer 3

问题是您忘记为onClick添加一个input事件，当您在其中键入内容时，该事件就会处理（您只需在每次{{1} }事件发生了），就像这样（我还更新了ES6语法）：

onChange

无法在输入字段中输入

3 个答案: