相关疑难解决方法(0)

我有一个带有onChange事件处理程序的简单控制输入.

一切都按照handleChange每次按键点火的方式工作,问题是它很慢.

使用输入时存在非常明显的延迟.是否有一些额外的代码我必须正常工作才能正常输入？

我是否必须去除输入？

据我所知,在文档中没有提到这个问题,我不知道是否还有一些额外的事情需要做,或者我是否onChange错误地使用了回调.

handleChange = (event) => {
    this.setState({ itemNumber: event.target.value })
  }


<TextField
      id="Part #"
      label="Part #"
      value={this.state.itemNumber}
      onChange={this.handleChange}
      margin="normal"
    />

组件:

export class Dashboard extends Component {
  state = {
    report: '',
    selectedDate: new Date(),
    itemNumber: '',
  }

  static propTypes = {
    classes: object,
    headerTitle: string,
    userInfo: object,
  }

  static defaultProps = {
    classes: {},
    headerTitle: undefined,
    userInfo: {},
  }

  reportSelected = (event) => …

当用户单击编辑按钮时，我试图使用 setState 自动填充文本字段。文本已设置，但默认提示文本和浮动标签文本与文本重叠。当我在文本字段标签内点击时，提示文本与文本重叠。我该如何解决这个问题？

这是文本字段重叠图像。

这是按钮

<button type="button" className="btn btn-primary btn-sm" id="edit"
onClick={this.editProduct.bind(this, product)} value="edit">Edit</button>

当用户单击编辑按钮时，editProduct 函数 setState 设置如下

editProduct = product => {
    this.setState({ 
        name: product.name,
        brand: product.brand,
        description: product.description, 
     });   
}

render() {
const {  name, brand, description } = this.state;
const values = { name, brand, description };

return ( 
    <div class="container">   
        <Addproduct
        handleChange={this.handleChange}
        values={values}
        />
  )
}

这是 Addproduct 组件中的文本字段

<TextField
hintText="Enter Your Product Name"
floatingLabelText="Product Name"
onChange={handleChange('name')}
errorText={values.nameError}
defaultValue={values.name}
fullWidth
/>