Giá trị cài đặt React.js của đầu vào

Question

Tôi là người mới bắt đầu với react.js và thật tuyệt vời nhưng tôi đang đối mặt với một vấn đề thực sự: Tôi cần đặt giá trị của đầu vào bằng javascript thuần túy nhưng thuần túy. không hoạt động như mong đợi. Lấy ví dụ này: mở URL này http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq

Bạn sẽ thấy có trường nhập "Email" có id là "CntctFrm2emailField". Tôi cố gắng để thay đổi giá trị của nó bằng cách sử javascript với mã này:

document.getElementById("CntctFrm2emailField").value = "testing@gmail.com"; 

Nhưng đối với một số lý do React.js không cập nhật giá trị này vào nguyên nhân cốt lõi của nó nếu bạn cố gắng gửi biểu mẫu (Nhấp vào nút SEND) bạn sẽ thấy rằng nó sẽ hiển thị một thông báo lỗi nói rằng email không được điền đúng. NHƯNG một khi tôi nhấp vào bên trong trường email và nhập bất kỳ ký tự nào và nhấp vào nút GỬI, nó hoạt động tốt, ý tôi là, React.js sẽ thấy giá trị mới.

Vậy làm cách nào để thay đổi giá trị đầu vào và có React.js để cập nhật giá trị đó?

Answer 1

Bạn nên đăng mã của bạn để có được một/nhiều đến tình hình của bạn câu trả lời phù hợp tốt hơn, nhưng một suy nghĩ rằng sẽ chỉ làm việc được thiết lập

defaultValue 

thay vì value của đầu vào. Hãy xem bảng điều khiển trình duyệt của bạn, đó là những gì phản ứng sẽ đăng nhập ở đó.

Tùy thuộc vào mã của bạn, bạn có thể thiết lập các statesvalueonKeyUp hoặc tương tự với một chức năng hoặc lấy giá trị đầu vào mới khi biểu mẫu được gửi.

Answer 2

Đây là chìa khóa trong câu hỏi của bạn,

Nhưng đối với một số lý do React.js không cập nhật giá trị này vào cốt lõi của nó

Nguyên nhân chủ yếu là phản ứng công trình trong vòng một 'bóng dom 'và

document.getElementById("CntctFrm2emailField").value = "testing@gmail.com"; 

Inst cập nhật giá trị phản ứng theo bất kỳ cách nào chỉ là đối tượng dom cửa sổ.

Phản ứng đã tích hợp sẵn các chức năng để cập nhật giá trị của đầu vào. Hãy thử cách đó.

Kiểm tra trang này để biết thêm về phản ứng dạng: https://facebook.github.io/react/docs/forms.html#controlled-components

Answer 3

Tôi đã viết và sử dụng chức năng này để kích hoạt trạng thái thay đổi đối với lĩnh vực này:

function doEvent(obj, event) { 
    /* Created by David@Refoua.me */ 
    var event = new Event(event, {target: obj, bubbles: true}); 
    return obj ? obj.dispatchEvent(event) : false; 
} 

Sử dụng nó như thế này:

var el = document.getElementById("CntctFrm2emailField"); 
el.value = "testing@gmail.com"; 
doEvent(el, 'input'); 

Answer 4

Tôi có biểu mẫu mà tôi cần gửi để theo dõi. Tôi đã làm điều đó như thế này:

$("input[type=email]").value = "me@something.com" 
$("input[type=email]").defaultValue = "me@something.com" 
$("input[type=password]").value = "mystellarpassword" 
$("input[type=password]").defaultValue = "pinpmystellarpasswordss" 
$("input[type=email]").dispatchEvent(new Event('input', {target: $("input[type=email]"), bubbles: true})); 
$("input[type=password]").dispatchEvent(new Event('input', {target: $("input[type=password]"), bubbles: true})); 
$("button.login").click() 

Lưu ý rằng đối với trang web của tôi đã đăng nhập vào, tôi phải đặt cả giá trị và defaultValue. Có một số logic xác thực bổ sung được ràng buộc với đầu vào.giá trị