React ile oluşturulan giriş öğelerini program aracılığıyla nasıl doldurulur?

Question

React ile oluşturulmuş tarama web sitesiyle görevlendirildim. Girdi alanlarını doldurmaya ve sayfaya javascript enjeksiyonu kullanarak göndermeye çalışıyorum (selenyum veya mobilde web görünümü). Bu, diğer her site + teknolojisinde bir çekicilik gibi çalışır ancak React gerçek bir acı gibi gözüküyor. işte

bir örnek kod

var email = document.getElementById('email'); 
email.value = 'example@mail.com'; 

I DOM giriş öğesinin üzerinde değeri değiştiğinde, ancak değişim olayı tetiklemez yanıt verin.

Ben durumunu güncellemek için Tepki almak için farklı yollar bolluk çalışıyorum.

var event = new Event('change', { bubbles: true }); 
email.dispatchEvent(event); 

Çok zor hale getirilmiştir tepki ile etkileşim inanamıyorum

çalışmıyor

çalışmıyor boşuna

var event = new Event('input', { bubbles: true }); 
email.dispatchEvent(event); 

. Her türlü yardıma çok minnettar olurum.

Eğer

Answer 1

metin alanlarından input Olayı dinleyen React ederiz.

Sen onChange işleyicisi tetikleyecek değerini değiştirmek ve manuel bir giriş olayını tetikleyebilir ve en tepki verebilir

:

class Form extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = {value: ''} 
 
    } 
 
    
 
    handleChange(e) { 
 
    this.setState({value: e.target.value}) 
 
    console.log('State updated to ', e.target.value); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <input 
 
      id='textfield' 
 
      value={this.state.value} 
 
      onChange={this.handleChange.bind(this)} 
 
     /> 
 
     <p>{this.state.value}</p> 
 
     </div>  
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Form />, 
 
    document.getElementById('app') 
 
) 
 

 
document.getElementById('textfield').value = 'foo' 
 
const event = new Event('input', { bubbles: true }) 
 
document.getElementById('textfield').dispatchEvent(event)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'></div>