Truy cập vàoThay đổi sự kiện từ thành phần con (React/Redux)

Question

Tôi có thành phần vùng chứa hiển thị thành phần con với đầu vào. Tôi muốn có quyền truy cập vào giá trị của thành phần con trong sự kiện onChange, nhưng tôi nhận được đối tượng "Proxy" thay vì giá trị đầu vào.

container Component

... 

class InputContainer extends React.Component { 

    handleChange = (val) => { 
     console.log(val); 

     // => Proxy { [[Handler]]: Object, [[Target]]: SyntheticEvent, [[isRevoked]]: false } 
    } 

    render() { 
     return <Input handleChange={this.handleChange} {...this.props} />; 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(InputContainer); 

phần Input

export default function Input(props) { 
    return <input onChange={props.handleChange} />; 
} 

Tại sao tôi lại nhận được "Proxy" đối tượng này và làm thế nào tôi có thể nhận được giá trị của đầu vào từ InputContainer?

Answer 1

gì bạn đang nhìn thấy một thể hiện của Phản ứng của SyntheticEvent là. Lưu ý rằng tất cả mọi thứ sẽ làm việc như nhau, tức là điều này sẽ làm việc:

console.log('ev -> ', ev.target.value); 

Tuy nhiên, nếu bạn muốn xem các giá trị trong các công cụ cho nhà phát triển thử:

console.log('ev -> ', ev.nativeEvent); 

Nguồn: https://facebook.github.io/react/docs/events.html

Quote :

Trình xử lý sự kiện của bạn sẽ được chuyển qua trường hợp của SyntheticEvent, trình bao bọc chéo trình duyệt sự kiện gốc của trình duyệt. Nó có cùng giao diện như sự kiện gốc của trình duyệt, bao gồm stopPropagation() và preventDefault(), ngoại trừ các sự kiện hoạt động giống nhau trên tất cả các trình duyệt. Nếu bạn thấy rằng bạn cần sự kiện trình duyệt cơ bản vì một lý do nào đó, chỉ cần sử dụng thuộc tính nativeEvent để nhận nó.

Answer 2

Không chắc chắn nếu đó là lỗi nhập nhưng bạn có hangleChange thay vì handleChange. Dù sao, onChange qua một đối tượng Event -like, giá trị có thể được tìm thấy trong event.target.value

handleChange(event) { 
    console.log(event.target.value); 

Read up on React's event system

Answer 3

này là hoàn toàn bình thường. Bạn có thể truy cập vào các giá trị thông qua event.target.value:

handleChange(event) { 
    console.log(event.target.value); 
} 

More info in the React docs.