Dan Dan - 6 months ago 64
Javascript Question

Get Input Value From Stateless Component

CONTEXT

I'm trying to get the value of an input field from a stateless component inside another stateless component and then use it to call a method. I'm using rebass for my UI component and doing this in Meteor + Mantra.

I understand that I could do this by using refs if I were using

<input>
HTML fields and not another stateless component.

PROBLEM

My current code yield preventDefault of undefined, and when removed, the console.log prints out each time the input changes, not on submit. I believe that my state applies to the entire Dashboard component, instead of the stateless Rebass
<Input/>
, but I do not know how to change this.

import React from 'react';
import {PageHeader, Container, Input,Button} from 'rebass';

class Dashboard extends React.Component {
constructor(props) {
super(props);

this.state = { websiteUrl: ''};
this.onInputChange = this.onInputChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
}

onInputChange(event) {
this.setState({websiteUrl:event.target.value});
}

onFormSubmit() {
event.preventDefault;
const {create} = this.props;
const {websiteUrl} = this.state.websiteUrl;
console.log(this.state.websiteUrl);
create(websiteUrl);
}

render() {
const { error } = this.props;

return (
<div>

<PageHeader
description="Dashboard Page"
heading="Dashboard"
/>

<Container>
<form>
<Input
value={this.state.websiteUrl}
type="text"
buttonLabel="Add Website"
label="Website"
name="add_website"
onChange={this.onInputChange}
/>

<Button
backgroundColor="primary"
color="white"
inverted={true}
rounded={true}
onClick={this.onFormSubmit()}
> Add Website </Button>
</form>
</Container>
</div>
);
}
}

export default Dashboard;

Answer

You should pass an event to the onFormSubmit function:

    <Button
      backgroundColor="primary"
      color="white"
      inverted={true}
      rounded={true}
      onClick={(event) => this.onFormSubmit(event)}
      ...