从无状态组件获取输入值

Question

上下文

我试图从另一个无状态组件中获取输入字段的值，然后使用它调用一个方法。我在UI组件中使用rebass，并使用Meteor + Mantra进行此操作。

我知道，如果我使用的是<input>字段，而不是另一个无状态组件，我可以使用refs来实现这一点。

问题

我的当前代码生成未定义的preventDefault，删除后，console.log每次输入更改时打印出来，而不是在提交时打印出来。我相信我的状态适用于整个仪表板组件，而不是无状态<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)}
      ...