Comments (4)
Ahh yes. You're right. I've updated the input component to handle this.
Now you can do:
render: function() {
return (
<mui.Input ref="firstname" defaultValue="Test" onChange={this._onChange} />
);
},
//onChange now passes back the new value as a second parameter
_onChange: function(e, value) {
console.log(value);
//Or you can do this elsewhere in your component
console.log(this.refs.firstname.getValue());
}
from material-ui.
Hi @mwq27 - I'm not able to reproduce the issue you're referring to.
I was able to do that following:
/**
* @jsx React.DOM
*/
var React = require('react'),
mui = require('material-ui');
var myComponent = React.createClass({
componentDidMount: function() {
console.log(this.refs.firstname.getDOMNode());
},
render: function() {
return (
<mui.Input ref="firstname" type="text" name="firstname" placeholder="First Name" description="Your first name as it appears on your credit card." />
);
}
});
module.exports = MyComponent;
from material-ui.
So I have
console.log(this.refs.firstname.getDOMNode().value)
that is returning undefined, even after I add text to the input. this.refs.firstname.getDOMNode() by itself is the div that gets created in Input.jsx, so I guess it wouldn't have a .value property.
from material-ui.
ok great, thank you :)
from material-ui.
Related Issues (20)
- [material-ui] How to reduce bundle size? HOT 3
- [@mui/styles] React 17 dependency HOT 1
- [code-infra] Migration to ESLint v9
- Compatibility with React 19 types
- [docs] Introduce User Persona for Enhanced Portuguese/Brazilian Documentation HOT 1
- [material ui] [PaginationItem] Pagination Item component crashes due to a null check missing for contrastText HOT 3
- CSS rule "& > *" seems not working for some components after the migration from v4 to v5
- [material-ui][Grid] faulty wrapping on firefox if container has non-integer pixel width
- [material-ui] Cannot globally override `margin`/`margin-*` CSS properties of elements represented by `Typography` HOT 2
- [material-ui][Modal] Enhanced Modals Manager with Multi-step Modal Support and Confirm Modal Component
- [docs-infra] Demo toolbar buttons can't be accessed via keyboard HOT 2
- [question] How can I render a specific value in an Autocomplete component differently?
- [docs-infra] Hide Tailwind variables from the dev tools when not used
- [material-ui][Select] Remove focus from the input when the listbox disappears
- [material-ui] Duplicate class names for components
- [material-ui][docs] Improve the Tailwind CSS with Next.js usage section
- Passing `slotProps` to a `Drawer` component causes React to complain only on desktop "React does not recognize the `slotProps` prop on a DOM element."
- [AppRouterCacheProvider] enableCssLayer not working as expected
- [docs] codemods require certain version of nodejs otherwise fails with "Unexpected token ."
- [material-ui][Switch] Undefined/null values in the theme causes crash
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.