ref

问题 Code: import DrawControl from "react-mapbox-gl-draw"; export default function MapboxGLMap() { let drawControl = null return( <DrawControl ref={DrawControl => {drawControl = DrawControl}}/> ) } I want to load data when the drawControl not null. I check the document that may use callback ref. So, how do I listen the drawControl changes and load data? 回答1: If you want to trigger a re-render after the ref changes, you must use useState instead of useRef . Only that way can you ensure that the

问题 Code: import DrawControl from "react-mapbox-gl-draw"; export default function MapboxGLMap() { let drawControl = null return( <DrawControl ref={DrawControl => {drawControl = DrawControl}}/> ) } I want to load data when the drawControl not null. I check the document that may use callback ref. So, how do I listen the drawControl changes and load data? 回答1: If you want to trigger a re-render after the ref changes, you must use useState instead of useRef . Only that way can you ensure that the

问题 I'm having a hard time understanding the docs on how to access the DOM ref of a child class component from the parent class component. Parent.js: import Child from './Child'; class Parent extends Component { constructor(props) { super(props); this.refOfTheParent = React.createRef(); } componentDidMount() { const parentDOM = this.refOfTheParent.current; //const childDOM = ???; } render() { return ( <div ref={this.refOfTheParent}> <Child /> </div> ); } } export default Parent; Child.js: class

问题 I've built a form in React using MUI and React Hook Form. I'm trying to create a custom TextField element that works as a Select Input . I would like it to be an uncontrolled component with a Ref prop. I've tried to pass the inputRef prop as the MUI and React Hook Form docs recommend but with no success. <TextField id="id" name="name" select native="true" className={classes.textField} label="label" margin="normal" variant="outlined" inputRef={register({ required: "Choose one option" })} error

来源： https://stackoverflow.com/questions/63322202/json-dynamically-refer-to-another-value

来源： https://stackoverflow.com/questions/59647940/how-can-i-use-ref-in-textfield

来源： https://stackoverflow.com/questions/61450739/understanding-warning-function-components-cannot-be-given-refs

问题 Let's say I have a collection of comments. Every comment object has a "doc ref" to the user who posted. I need a query that will return a list of comments including the value of every single user reference, so my query returns a nice formatted of Json comment objects. 回答1: A similar question was asked here What is firestore Reference data type good for?, I don't think it is possible to do what you are asking according to this answer https://stackoverflow.com/a/46570119/473453. You have to

问题 I have one smart and one dumb component, I need to have ref to an element which is in my the dump component in my smart component: can I pass it with props or?? Dumb: export default (props)=>{ return( <input type='number' ref='element'}/> );} Smart: class Parent extends Component { constructor(props) { super(props); } componentDidMount() { const node = this.refs.element; // undefined } render(){ return <Dumb { ...this.props }/> } } 回答1: You could use the callback syntax for refs: // Dumb:

问题 I have one smart and one dumb component, I need to have ref to an element which is in my the dump component in my smart component: can I pass it with props or?? Dumb: export default (props)=>{ return( <input type='number' ref='element'}/> );} Smart: class Parent extends Component { constructor(props) { super(props); } componentDidMount() { const node = this.refs.element; // undefined } render(){ return <Dumb { ...this.props }/> } } 回答1: You could use the callback syntax for refs: // Dumb: