[React] Use React ref to Get a Reference to Specific Components
React to get use reference Components ref specific
2023-09-14 08:59:18 时间
When you are using React components you need to be able to access specific references to individual component instances. This is done by defining a ref
. This lesson will introduce us to some of the nuances when using ref
.
<input ref="b" type="text" onChange={this.update.bind(this)} />
The way to refer to the 'ref':
this.refs.b.value
Also 'ref' is able to receive a callback function:
<Input ref={ component => this.a = component} update={this.update.bind(this)} /> class Input extends React.Component { render(){ return <div><input ref="input" type="text" onChange={this.props.update}/></div> } }
Now the way to access the ref value:
this.a.refs.input.value,
class App extends React.Component { constructor(){ super(); this.state = {a: '', b: ''} } update(){ this.setState({ a: this.a.refs.input.value, b: this.refs.b.value }) } render(){ return ( <div> <Input ref={ component => this.a = component} update={this.update.bind(this)} /> {this.state.a} <hr /> <input ref="b" type="text" onChange={this.update.bind(this)} /> {this.state.b} </div> ) } } class Input extends React.Component { render(){ return <div><input ref="input" type="text" onChange={this.props.update}/></div> } } ReactDOM.render( <App />, document.getElementById('root') );
相关文章
- react开发教程(六)React与DOM
- 从React 编程到"好莱坞"
- [React Recoil] Write a Custom Recoil Hook to Reset a Value in the Recoil State
- [React Testing] Mock react-transition-group in React Component Tests with jest.mock
- [React] Get Previous Resource Values with React’s useDeferredState Hook
- [React + GraphQL] Use useLazyQuery to manually execute a query with Apollo React Hooks
- [Recompose] Stream Props to React Children with RxJS
- [React] Configure a React & Redux Application For Production Deployment and Deploy to Now
- [React Intl] Use a react-intl Higher Order Component to format messages
- [React] Pass Data To Event Handlers with Partial Function Application
- [React] React Fundamentals: Mixins
- [AWS Amplify] Deploy Your React Application to AWS Using the Amplify CLI
- [React] Broadcaster + Operator + Listener pattern -- 21. useBroadcaster & useListener Example 2 (allowWhen)
- [React] Fix "React Error: Rendered fewer hooks than expected"
- [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose
- [React] Call setState with null to Avoid Triggering an Update in React 16
- [React] Render Elements Outside the Current React Tree using Portals in React 16
- [React] Create component variations in React with styled-components and "extend"
- [React Intl] Use a react-intl Higher Order Component to format messages
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
- [React] Use React.cloneElement to Extend Functionality of Children Components
- [React] Intro to inline styles in React components
- React Native开发技术
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- weex vs react-native
- react获取iframe里的document
- react之创建组建并使用props