New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
InputText value & defaultValue Problem. #80
Comments
Thanks for digging into this. I can take a closer look tonight. Which version of MUI are you using? I pushed some changes to the Input components in v0.4.1. |
I am all up-to-date. If you provide your opinion also I can include it to my push request |
What do you mean by becoming When I wrote the logic for the Are you having problems changing the value of the input element in the DOM by changing the |
If I set value I can not edit it without providing onChange function and it is the expected result. In your test case you are setting the state of TestApp instance , it is the same thing that I did with Form. The thing is
|
I see... is that the intended use of React components? I thought about doing that but I couldn't find any examples in the React documentation of an outer component calling an inner component's |
Summary: I think
setState and correct usage of it is very important for performance so instead of rendering parent with other children react lets us to modify a child component. It has |
And as an example I looked at Forms
As you see, |
That example makes sense, but how is that different from this? import React from 'react';
import TextInput from 'muicss/lib/react/text-input';
class Example extends React.Component {
handleChange(ev) {
this.setState({value: ev.target.value});
}
render() {
return <TextInput value={this.state.value} onChange={this.handleChange.bind(this)} />;
}
} |
Can you show me an example of how you'd like to use |
Hi , this is from your sample
And I think it should be like
|
It would still be useful to see how you expect it to work in your component. Does your use case look like this? import React from 'react';
import TextInput from 'muicss/lib/react/text-input';
class Example extends React.Component {
handleChange(ev) {
this.setState({value: ev.target.value});
}
render() {
return <TextInput value={this.state.value} onChange={this.handleChange.bind(this)} />;
}
} |
Or are you trying to do something like this? import React from 'react';
import TextInput from 'muicss/lib/react/text-input';
class Example extends React.Component {
changeValue(newVal) {
this.refs.inputEl.setState({value: newVal});
}
render() {
return <TextInput ref="inputEl" />;
}
} |
Sorry for delay, Timezone problems 😄 Here is my code handleChange = (code, event)=> {
this.refs[code].setState({
value: event.target.value
});
};
render(){
return <TextInput
type="text"
label="Name"
floatingLabel={true}
value="Seray"
key="name"
onChange={this.handleChange.bind(this,"name")}
ref="name"
defaultValue="Seray"
} |
Thanks! That's very helpful. And just to make sure I understand - the reason you want to call |
Yes, I don't want to render whole form but just the related component on change. Also I think |
Ok thanks! Using |
I've been digging into this and I'm not sure if calling I added some debugging statements to the import React from 'react';
import Button from 'muicss/lib/react/button';
import TextInput from 'muicss/lib/react/text-input';
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'initial'};
}
onClick() {
this.setState({value: Math.random().toString()});
}
render() {
return (
<div>
<TextInput value={this.state.value} onChange={function(){}} />
<Button onClick={this.onClick.bind(this)}>Update</Button>
</div>
);
}
} And what I found was that the component only gets mounted once and each subsequent button click will trigger a call to the |
Sorry for late response and thanks for not giving up 😄 . In your example, you only change Did I get it right? |
I see... that makes sense. Do you usually use this technique to update React |
Not usually but, now I am writing a form renderer for datatable. It will be written once and must be well calculated. For docs you mentioned I am not sure but it seems Refs to Components is related. I think it supports my Idea.
|
@serayuzgur Here's a new branch that supports the After working on this, I'm not sure this is a use case we should support in an official way. Here's a quote from the Refs to Components document which says refs shouldn't be used as the go-to way to flow data:
Do you have a sense for what the performance benefit is of calling |
Hi @amorey
How to would handle
Maybe my approach is wrong, but this confuses my mind.
|
That should work except the handleChange = (code, event) => {
this.refs[code].setState({
value: event.target.value
});
}; What do you mean by confusing? Which part of the code do you want advice on? I've been reading up on Instead of |
Thanks for all the help and explanation. |
Summary:
value
attr should be taken from state. I am planning to change it that way and implementcomponentShouldUpdate
Here is the scenario. I have a grid.
So as a know ,
defaultValue
renders only for the first time. So if I set selected values todefaultValue
attr it will not be rendered again after selection changes.value
attr renders everytime so it will be updated after my new selection but it is becomingeditable=false
by the nature of the React.I added onChange props to the component, it is not throwing any warning log also it is not reflecting by value change to the field.
So only solution is to render form on every onChange.
Here is the ss for better explaining what I did.
The text was updated successfully, but these errors were encountered: