Получить входное значение от Stateless компонента

Question

КОНТЕКСТЕ

Я пытаюсь получить значение поля ввода от лица без компонента внутри другого лицо без компонента, а затем использовать его для вызова метода. Я использую rebass для своего компонента пользовательского интерфейса и делаю это в Meteor + Mantra.

Я понимаю, что я мог бы сделать это, используя ссылки refs, если я использую поля HTML <input>, а не другой компонент без гражданства.

ПРОБЛЕМА

Мой текущий выход кода preventDefault неопределенных, а когда удаляется, console.log печатает каждый раз, когда входные изменения, а не на форму. Я считаю, что мое состояние относится ко всему компоненту Dashboard, а не к статусу Rebass <Input/>, но я не знаю, как это изменить.

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 1

Вы должны пройти event функции onFormSubmit:

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