Question

我正在使用React（Typescript Version）在表单内显示一些输入。问题（从图像中可以看到）是，当我通过setState函数更新值时，值将不会在右侧“滚动”

render() {
 return(
   <input
   name={this.props.input.Name}
   type={this.props.input.Type}
   defaultValue={this.state.value}
   ref={this._input}
   key={key()}
)}

更新Value的函数是一个通用的Set Function：

public set Value(data: string) {
  this.setState({
   internalValue: data,
   inputError: !this.validateValue(data)
  });
}

请注意，如果我使用“键盘”进行书写，则输入可以正常工作，但是如果我使用屏幕上的“模拟”键盘进行书写，则会发生我刚才描述的情况

有什么想法吗？

谢谢

在支持Simbathesailor之后更新：

render() {
     return(
       <input
       name={this.props.input.Name}
       type={this.props.input.Type}
       defaultValue={this.state.value}
       ref={this._input}
       key={key()}
       onChange={this.setValue}
     />
    )
}


componentDidUpdate(prevProps: InputProps, prevState: InputState) {
        if (prevState.value!== this.state.value) {
            this._input.current.focus();
        }
    }

setValue(event: React.ChangeEvent<HTMLInputElement>) {
    console.log('change');
    this.setState({
        value: event.target.value
    })
}

shouldComponentUpdate(nextProps: InputProps, nextState: InputState): boolean {
        return (this.state.value!= nextState.value);
    }


public set Value(data: string) {

        this.setState({
            value: data,
            inputError: !this.validateValue(data)
        }, () => {
            this._input.current.focus();
        });
    }

Answer 1

您可以使用引用和提交生命周期方法componentDidUpdate方法。为达到这个。在下面提到的示例中，它是针对不受控制的组件完成的。但是对于受控组件，想法也将保持不变。

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.InputRef = React.createRef()
    this.state = {
      value: 0
    }
  }
  setValue = (event) => {
    this.setState({
      value:event.target.value
    })
  }
  update = () => {
    this.setState({
      value: (this.state.value || 0) + 1000
    })
  }
  componentDidUpdate(prevProps, prevState) {
    if(prevState.value !== this.state.value) {
      this.InputRef.current.focus()
    }
  }
  render() {
    return (
    <div>
     <input 
       value={this.state.value}
       onChange={this.setValue}
       ref={this.InputRef}
      /> 
      <button onClick={this.update}>update</button>
     </div>
    )
  }
}

ReactDOM.render(<Test />, document.getElementById("root"))

这里是codepen链接，它可以正常工作：

我是第一次尝试打字稿。感谢您的问题:)。打字稿很好。这是打字稿中所需的解决方案。

Codesandbox link(Typescript)

受控输入，显示的值不会更新为最后一位

1 个答案: