Question

我正在使用reactJS构建应用程序，并且我有一个名为添加项目的按钮，应在文本字段中键入一个项目。我试图找出一种方法，当按下按钮时，在使用材质UI创建的文本字段上显示错误消息。当按下按钮时，该方法应检查文本字段是否为空。如果文本字段为空，则文本字段中应该有一个错误，指示该文本字段为空。

当单击按钮时，我找不到执行此操作的方法。

这是我的app.js，在addItem方法中，我检查文本字段是否为假，是否为假，我需要执行错误消息

handleInput = e => {
  this.setState({
    newItem: {
      id: 1 + Math.random(),
      itemText: e.target.value
    }
  });

};

addItem = e => {
  e.preventDefault();
  const typedItem = this.state.newItem;
  if (typedItem.itemText !== "") {
    const typedItems = [...this.state.items, typedItem];
    this.setState({
      items: typedItems,
      newItem: {
        id: '',
        itemText: ''
      },
      updateItem: false
    })
  } else {

  }

};

render() {
  return (
    <div >

      <HeaderBar />
      <InputForm newItem={this.state.newItem.itemText}
        addItem={this.addItem}
        handleInput={this.handleInput}
      />
    </div>
  );
}

这是我传递道具的Form组件的一部分，因此当我提交按钮时，我需要在文本字段上显示错误。我该怎么做？我是否需要从Form组件或app.js中进行

const { newItem, addItem, handleInput } = this.props;

<form onSubmit={addItem} autoComplete='off' >
  <TextField
    id="outlined-full-width"
    label="Input"
    style={{ width: '90%', marginTop: 30, marginLeft: 40 }}
    placeholder="Add A Todo Item "
    margin="normal"
    InputLabelProps={{
      shrink: true,
    }}
    size="medium"
    variant="outlined"
    value={newItem}
    onChange={handleInput}
  //error{newItem === ""}
  />
  {buttonChange()}
</form>

使用材质ui在文本字段上显示错误

0 个答案: