Question

我必须在输入字段上添加验证，所以我使用了它：

<input
  type="text"
  name={this.state.editBookData.title}
  value={this.state.toEditBookData.title}
  onChange={e => {
    let { editBookData } = this.state;
    editBookData.title = e.target.value;
    this.setState({ [editBookData.title]: e.target.value });
  }}
/>

在这里，第this.setState({[editBookData.title]: e.target.value});行正在停止输入的任何输入。

editBookData设置为如下状态：

constructor(props) {
  super(props);
  this.state = {
    toEditBookData: {
      id: 0,
      title: "",
      rating: ""
    }
  };
}

同样，当我在控制台中签入时，当我在输入中键入任何内容时，name属性仅包含1个字符，并停止添加任何其他字符。请让我知道为什么我不能输入任何字母。谢谢

Answer 1

您不想向状态添加与editBookData.title相同名称的新属性，而是使用新标题更新toEditBookData对象，因为这就是{ {1}}作为输入。

value

Answer 2

我不确定这里是否需要两个对象。这应该可以解决问题。

class App extends React.Component {
  state = {
    id: 0,
    title: "",
    rating: "",
    errors: {}
  };

  handleChange = e => {
    const { name, value } = e.target;
    const { errors } = this.state;

    errors[name] = !!!value;
    this.setState({ [name]: value, errors });
  };

  render() {
    const { title, errors } = this.state;

    return (
      <div className="App">
        <label htmlFor="title">Title: </label>
        <br />
        <input
          type="text"
          name="title"
          value={title}
          onChange={this.handleChange}
        />
        <br />
        {errors.title && (
          <span style={{ color: "red" }}>Title is a required field</span>
        )}
      </div>
    );
  }
}

键入时输入值不超过

2 个答案: