kickjs输入元素在击键后失去焦点

2 回答

• 1

  您共享的代码存在一些问题 .

  • 不要使用内联函数 . 每次渲染，再次创建函数，这意味着当react比较道具时，它看起来像函数不同（每次都是一个新的/不同的函数！）并且反应将重新渲染 .

  • Don 't modify any objects which exist in the state, instead create a new object. If you modify an object that exists in the state, you'基本上说你不希望渲染具有一致性和可重复性 .

  我重新发布了原始代码并突出显示了问题

  CreateItem(variant) {
    const unitPriceValueHash = this.props.unitPriceValueHash
    return {
      variant_title: variant.variant_title,
      variant_price: variant.variant_price,
      unit_cost: <TextField
        type="number"
        onChange={(event) => this.handleUnitPriceChange(variant.id, event)}
        // ^^^^ - inline functions cause react to re-render every time, instead - create a component
        key={variant.id}
        value={unitPriceValueHash[variant.id] || ''}
      />
    };
  }
  
  handleUnitPriceChange(id, event) {
    const unitPriceValueHash = this.state.unitPriceValueHash
    unitPriceValueHash[id] = event
    // ^^^^ - please, please - don't do this. You can't mutate the state like this.
  
    // instead, do the following to create a new modified object without modifying the object in the state
    const unitPriceValueHash = Object.assign({}, this.state.unitPriceValueHash, { id: event });
    this.setState({ unitPriceValueHash: unitPriceValueHash });
  }
  

  关于内联函数，通常建议为此创建一个新组件，将该值作为prop . 这可能看起来像这样：

  class UnitCost extends PureComponent {
    static propTypes = {
      variantId: PropTypes.number,
      variantValue: PropTypes.object,
      onUnitPriceChange: PropTypes.func,
    }
    handleUnitPriceChange(e) {
      this.props.onUnitPriceChange(this.props.variantId, e)
    }
    render() {
      return (
        <TextField
          type="number"
          onChange={this.handleUnitPriceChange}
          value={this.props.variantValue || ''}
        />
      );
    }
  }
  
  CreateItem(variant) {
    const unitPriceValueHash = this.props.unitPriceValueHash
    return {
      variant_title: variant.variant_title,
      variant_price: variant.variant_price,
      unit_cost: (
        <UnitCost
          key={variant.id}
          variantId={variant.id}
          variantValue={unitPriceValueHash[variant.id]}
          onUnitPriceChange={this.handleUnitPriceChange}
        />
      ),
    };
  }
  

  关于你对焦点的关注，由于这个原因，反应通常会在更新后重新聚焦一个对象 .

  唯一的反应将失去焦点，如果它完全丢弃当前的DOM树并从头开始 . 如果它认为父对象已被替换而不是被修改，它将执行此操作 . 这可能是因为缺少 key 道具或已改变的 key 道具 .

  您尚未发布足够的代码供我们进一步调查 . 如果您需要更多帮助，您应该构建一个我们可以运行和测试的最小可重复示例 .

  回复于 2024-05-10T04:57:53+08:00
• 0

  这个问题的解决方案让我使用中间状态来存储更改时输入字段的值，并在onBlur上提交AJAX请求

  class TextFieldWrapper extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: this.props.variantValue[this.props.variantId] || '',
      }
      this.handleUnitPriceChange = this.handleUnitPriceChange.bind(this)
      this.updateValue = this.updateValue.bind(this)
    }
    updateValue(value){
      this.setState({
        value: value,
      });
    }
    handleUnitPriceChange() {
      this.props.onUnitPriceChange(this.props.variantId, this.state.value);
    }
    render(){
      return (
        <TextField
          type="number"
          id={this.props.variantId}
          key={this.props.variantId}
          onChange={this.updateValue}
          onBlur={this.handleUnitPriceChange}
          value={this.state.value}
        />
      );
    }
  }
  

  回复于 2024-05-10T04:57:53+08:00