從無狀態組件獲取輸入值

Question

CONTEXT

我試圖從另一個無狀態組件中的無狀態組件獲取輸入字段的值，然后使用它來調用方法。 我正在為我的UI組件使用rebass，並在Meteor + Mantra中執行此操作。

我知道如果我使用<input> HTML字段而不是另一個無狀態組件，我可以通過使用ref來實現。

問題

我當前的代碼會使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)}
      ...