Как ввести в react-input значение вместо пользователя

#javascript #reactjs

Не получается заставить реакт считать, что пользователь ввёл в input некое значение.
Запускать собираюсь из консоли браузера.



class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: "initial msg" }
  }

  render() {
    return (
      

        
        {" "}
        {this.state.value}
      
     )
  }

  onChange = ({target: {value}}) => {
    this.setState({ value })
    console.log("New value:", value)
  }
}

ReactDOM.render(, document.querySelector('main'))

var inp = document.querySelector('input');
inp.value = "test"
inp.dispatchEvent(new Event('input', { bubbles: true }))







    

Ответы

Ответ 1

Проще не имитировать событие, а вызвать обработчик. Обработчики лежат в объекте .__reactEventHandlers$2hkln2vgbk3,
но хэш после $ может отличаться.



class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: "initial msg" }
  }

  render() {
    return (
      

        
        {" "}
        {this.state.value}
      
     )
  }

  onChange = ({target: {value}}) => {
    this.setState({ value })
    console.log("New value:", value)
  }
}

ReactDOM.render(, document.querySelector('main'))

var inp = document.querySelector('input')
inp.value = "new value"
for (var key in inp) {
  if (key.startsWith('__reactEventHandlers$')) {
    inp[key].onChange && inp[key].onChange({ target: inp })
  }
}






Ответ 2

Можно еще вызвать onChange непосредственно у экземпляра компонента. 

Единственная проблема - получить этот экземпляр :)



class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: "initial msg" }
  }

  render() {
    return (
      

        
        {" "}
        {this.state.value}
      
     )
  }

  onChange = ({target: {value}}) => {
    this.setState({ value })
    console.log("New value:", value)
  }
}

const main = ReactDOM.render( , document.querySelector('main'))

const inp = document.querySelector('input');
inp.value = 'new value';
main.onChange({
  target: inp
});








Еще есть такой вариант на костылях)



class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: "initial msg" }
  }

  render() {
    return (
      

        
        {" "}
        {this.state.value}
      
     )
  }

  onChange = ({target: {value}}) => {
    this.setState({ value })
    console.log("New value:", value)
  }
}

ReactDOM.render( , document.querySelector('main'))

function findFiberNode(fiberNode, target) {
  if (fiberNode.stateNode == target) {
    return fiberNode;
  } else if (fiberNode.child) {
    return findFiberNode(fiberNode.child, target);
  } else if (fiberNode.sibling) {
    return findFiberNode(fiberNode.sibling, target);
  } else {
    return null;
  }
}

const inp = document.querySelector('input');
const main = document.querySelector('main');
const fiberNode = findFiberNode(main._reactRootContainer._internalRoot.current, inp);
inp.value = 'new value';
fiberNode.memoizedProps.onChange({
  target: inp
});