Javascript 无法在输入字段中键入

嗨，我写了一个小组件

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>
    );
  }
}

导出默认类TextInput扩展React.Component{
建造师（道具）{
超级（道具）；
this.onKeyPress=this.onKeyPress.bind（this）；
this.state={tags:[]，值：“”}；
}
按键（e）{
如果（e.key==“输入”）{
this.setState（{tags:[…this.state.tags，e.target.value]，值：“”）；
}
}
render（）{
返回(
标签
{this.state.tags.map（tag=>(
{tag}
))}
);
}
}

---

在我输入时第一次写入后。它会创建一个标记，但在这之后，我无法在输入字段中键入任何内容。任何人都可以解释如何启用键入，以便我能够创建另一个标记。

您还需要一个

onChange

处理程序，以及在用户输入时更新

状态。否则，
此.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>
    );
  }
}

class TextInput扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onKeyPress=this.onKeyPress.bind（this）；
this.state={tags:[]，值：“”}；
}
按键（e）{
如果（e.key==“输入”）{
this.setState（{tags:[…this.state.tags，e.target.value]，值：“”）；
}
}
handleOnChange=e=>{
这是我的国家({
价值：即目标价值
});
};
render（）{
返回(
标签
{this.state.tags.map（tag=>(
{tag}
))}
);
}
}

请参阅工作沙盒：
您还需要一个
onChange
处理程序，以便在用户输入时更新
状态。否则，
此.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>
    );
  }
}

class TextInput扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onKeyPress=this.onKeyPress.bind（this）；
this.state={tags:[]，值：“”}；
}
按键（e）{
如果（e.key==“输入”）{
this.setState（{tags:[…this.state.tags，e.target.value]，值：“”）；
}
}
handleOnChange=e=>{
这是我的国家({
价值：即目标价值
});
};
render（）{
返回(
标签
{this.state.tags.map（tag=>(
{tag}
))}
);
}
}

请参阅working sandbox:
问题在于，您忘记为
输入添加
onClick
事件，这将在您在其中键入内容时处理（您只需要在每次
onChange
事件触发时更新状态），如下所示（我还更新了更多ES6语法）：

import React，{Component}来自'React'；
导出默认类TextInput扩展组件{
状态={tags:[]，值：'}；
onKeyPress=e=>{
如果（e.key==“输入”）{
this.setState（{tags:[…this.state.tags，e.target.value]，值：“”）；
}
};
onClick=e=>{
if（e&&e.target&&e.target.value）{
this.setState（{value:e.target.value}）；
}
};
render（）{
const{tags，value}=this.state；
返回(
标签
{tags.map（tag=>(
{tag}
))}
);
}
}
问题在于，您忘记为
输入添加
onClick
事件，这将在您在其中键入内容时处理（您只需在每次
onChange
事件触发时更新状态），如下所示（我还更新了更多ES6语法）：

import React，{Component}来自'React'；
导出默认类TextInput扩展组件{
状态={tags:[]，值：'}；
onKeyPress=e=>{
如果（e.key==“输入”）{
this.setState（{tags:[…this.state.tags，e.target.value]，值：“”）；
}
};
onClick=e=>{
if（e&&e.target&&e.target.value）{
this.setState（{value:e.target.value}）；
}
};
render（）{
const{tags，value}=this.state；
返回(
标签
{tags.map（tag=>(
{tag}
))}
);
}
}
您可以在下面的代码中尝试。您可以删除设置为state的值。然后使用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>
       );
     }
    }

import React，{Component}来自'React'；
导出默认类TextInput扩展React.Component{
建造师（道具）{
超级（道具）；
this.onKeyPress=this.onKeyPress.bind（this）；
this.state={tags:[]}；
}
按键（e）{
如果（e.key==“输入”）{
this.setState（{tags:[…this.state.tags，e.target.value]，值：
e、 target.value}）；
log（“标记：”，this.state.tags）
}
}
handleInputChange=（事件）=>{
this.setState（{[event.target.name]：event.target.value}）；
};
render（）{
返回(
标签
{this.state.tags.map（tag=>(
{tag}
))}
);
}
}
您可以在下面的代码中尝试。您可以删除设置为state的值。然后使用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>
       );
     }
    }

import React，{Component}来自'React'；
导出默认类TextInput扩展React.Component{
建造师（道具）{
超级（道具）；
this.onKeyPress=this.onKeyPress.bind（this）；
this.state={tags:[]}；
}
按键（e）{
如果（e.key==“输入”）{
this.setState（{tags:[…this.state.tags，e.target.value]，值：
e、 target.value}）；
log（“标记：”，this.state.tags）
}
}
汉德莱恩普