reactjs - 受控输入，显示值不会更新到最后一位

问题描述

我正在使用 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();
        });
    }

标签： reactjs

您可以使用 refs 和提交生命周期方法 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 链接（打字稿）

reactjs - 受控输入，显示值不会更新到最后一位

问题描述

解决方案

推荐阅读