Request.js
export default class Request extends React.Component {
getForm(e) {
let v = validator(document.getElementById('myinput')); // here is should call function from another class
}
render(){
return(
<form onSubmit={this.getForm.bind(this)}>
<RequestValidator/> // here is I called second class
<Input id="myinput" value="65"/>
</form>
}
}
}
RequestValidator.js
export default class RequestValidator extends React.Component {
validator = (e) => { // here is the target function
console.log(e.value);
}
}
What I want to do is, pass a variable (#myinput value) from Request compontent class to a function (validator) in another compontent class (RequestValidator).
What I have done so far is above codes, but I got error:
'validator' is not defined no-undef
You can do that using ref. You create one in your parent component:
class Request extends React.Component {
constructor(props) {
super(props)
this.requestValidatorRef = React.createRef();
}
then you pass it to the child component:
<RequestValidator ref={this.requestValidatorRef} />
at this point you should be able to call your method like this:
getForm(e) {
this.requestValidatorRef.current.validator(e) // ...
}
If you want to pass parameter to another class in reactjs you should use props. Also variable in requestvalidator class have to use prop name. But in your case RequestValidator and Input components are different.
In main component class call like this:
<UserInput
titles={this.state.titles}
/>
In UserInput component use this prop like this:
class UserInput extends React.Component {
componentDidMount() {
console.log(" titles from main class:", this.props.titles);
}
}
Related
I'm using hooks.
I have a function to use dropzone library:
export function UploadFile() {
const [files] = useState([]);
return (
<MaterialDropZone
files={files}
showPreviews
maxSize={5000000}
filesLimit={5}
text="to upload"
/>
);
}
class MyClass extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
...
render(){
return (
<UploadFile />)
}
now I want to access files inside MyClass component to uplaod my files. but I don't know how to access files.
you cannot access the state defined in child component in your parent component directly.
What you can do is that you can define files state in your parent component MyClass and pass it as props in your child component UploadFile.
Well here I want to use one method to another component, And for that I found a way through composition.
And this is what I did for that
file1.js
import ProductList from '../../views/Products/ProductList';
class CloseableTab extends Component {
constructor() {
super();
this.tpItem = () => {
console.log("hello, item clicked");
};
}
render() {
return (
<div>
<ProductList
itemChange={this.tpItem} />
</div>
);
}
}
export default CloseableTab;
Then in productList I want to call the "tpItem" method by calling itemChange in prop.
Though before that I tried to console the 'prop' of product list. So, it shows me null object in the console. And for that I used the code below:
ProductList.js
export default class ProductList extends Component {
constructor() {
super();
};
render() {
console.log(this.props);
return { }
}
}
So, this gives me null object in the console.
I'll appreciate your help, thanks.
Did you make constructor props enabled ?
Just pass props parameter in constructor
constructor(props) {
super(props)
}
The constructor for a React component is called before it is mounted.
When implementing the constructor for a React.Component subclass, you
should call super(props) before any other statement. Otherwise,
this.props will be undefined in the constructor, which can lead to
bugs.
Its not ideal to define functions in the constructor of the component, you can declare them outside of constructor and pass them down, also, in ProductList you are trying to render an object which isn't supported. if you don't want to return anything use return null.
Below code works as expected.
class CloseableTab extends Component {
constructor() {
super();
this.tpItem = () => {
console.log("hello, item clicked");
};
}
render() {
console.log(this.tpItem);
return (
<div>
<ProductList
itemChange={this.tpItem} />
</div>
);
}
}
class ProductList extends Component {
render() {
console.log(this.props);
return null
}
}
However you must write it like
class CloseableTab extends Component {
tpItem = () => {
console.log("hello, item clicked");
};
render() {
console.log(this.tpItem);
return (
<div>
<ProductList
itemChange={this.tpItem} />
</div>
);
}
}
Working sandbox
Has anyone tried using the React Component library? https://formidable.com/open-source/component-playground/
Is there a way to only show just a segment of the codeText in the live code editor (e.g without the class and render method) but still setting the noRender to false?
Thanks!
You can create your component and then extend it with another component with the methods and properties you want to show.
For example;
export default class PrivateComponent extends React.Component {
constructor(props) {
super(props);
// constructor logic here
}
someHiddenMethod() {
// ...
}
render() {
return(
<div>
<h1>Hidden Render</h1>
</div>
)
}
}
import PrivateComponent from './PrivateComponent.jsx';
export default class PublicComponent extends PrivateComponent {
somePublicMethod() {
// ...
}
}
I have a base class that's being extended by several components, and inside that base class, there's an implicit variable that is being passed in from the classes that are extending it. For instance, I have the following as the base class:
export default class BaseCard extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
return (
<div>
{this.hasData && <span> Has Content </span>}
</div>);
}
}
And the component that extends the BaseCard:
export default class MyCard extends BaseCard {
constructor(props) {
super(props);
this.hasData = true;
}
render() {
return (
<div>
MyCard content
</div>);
}
}
this.hasData is defined inside the MyCard component, but since I'm testing BaseCard, it's not defined inside the class, and therefore, I can't test parts of the DOM that depend on that variable being there. How can I pass it in when testing with Enzyme?
You can set the variable on the instance like this:
const wrapper = mount(<MyCard />);
wrapper.instance().hasData = true;
I'm using Alt.js's connectToStores to access store state inside a component, but when I try to call this component's method from aother component (using a ref), the method seems to be lost because of a wrapper component (gives undefined method).
comp_a.js
class CompA extends React.Component {
...
static getStores() { ... }
static getPropsFromStores() { ... }
...
method() {
}
...
}
export default connectToStores(CompA);
comp_b.js
class CompB extends React.Component {
...
test() {
// Causes error because "method()" is lost during connectToStores export
// It seems that connectToStores doesn't inherit the base component, instead it wraps the component with another component.
this.refs.other.method();
}
...
render() {
return (
<CompA ref="other" />
);
}
...
}
Is there any way to still call method() ?
Is there any way to access the wrapped component?