小编Dan*_*Dan的帖子

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" …

CONTEXT

我正在尝试将输入值字段(conditionTitle)从React无状态子组件(AddConditionSelect)传递到AddConditionDashboard将保持我的状态的父组件().

问题

我遵循React文档中显示的模型,但它们使用的是refs,只有在组件是有状态的情况下才有效.我不想在子组件中设置任何状态,但仍然可以访问父组件中的输入.

在其当前形式中,我得到一个警告,无状态函数组件不能被赋予refs,导致props为null和undefined.

父组件:

import AddConditionSelect from '../containers/AddConditionSelect.js';

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

    this.state = {
      conditionTitle: '',
      conditionType: ''
    };
  }

  handleUserInput({conditionTitleInput}) {
    this.setState({
      conditionTitle:conditionTitle
    })

  }

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

    return (
      <div>

    <AddConditionSelect segmentId={segmentId} conditionTitle={this.state.conditionTitle} onUserInput={this.handleUserInput} />


    <PanelFooter theme="default">
      <Button backgroundColor="primary" color="white" inverted={true} rounded={true} onClick={(event) => this.onSubmit(event)}>
        Next Step
      </Button>
    </PanelFooter>

      </div>
    );
  }

}

export default AddConditionDashboard;

子组件:

class AddConditionSelect …

我在WP网站上使用Ninja Forms.有两个不同的字段(文本框和提交按钮)是单独的DIV,都是单个DIV的子项.

它们出现在连续的线上,我似乎无法在同一条线上出现.救命？

可以在网站上看到DIV的当前代码:http://theroadmap.co/generation/

<div id="ninja_forms_form_2_all_fields_wrap" class="ninja-forms-all-fields-wrap">
<div class="field-wrap text-wrap label-above ninjacomment-wrap" id="ninja_forms_field_9_div_wrap" data-visible="1">
<input type="hidden" id="ninja_forms_field_9_type" value="text">
<label for="ninja_forms_field_9" id="ninja_forms_field_9_label" class=""> </label>
<input id="ninja_forms_field_9" data-mask="" name="ninja_forms_field_9" type="text" class="ninja-forms-field ninjacomment " value="" rel="9">
<div id="ninja_forms_field_9_error" style="display:none;" class="ninja-forms-field-error">
</div>
</div>
<div class="field-wrap submit-wrap label-left ninjasubmit-wrap" id="ninja_forms_field_10_div_wrap" data-visible="1">
<input type="hidden" id="ninja_forms_field_10_type" value="submit">
<input type="submit" name="_ninja_forms_field_10" class="ninja-forms-field ninjasubmit" id="ninja_forms_field_10" value="Suggest a link!" rel="10">
<div id="ninja_forms_field_10_error" style="display:none;" class="ninja-forms-field-error">
</div>
</div>
</div>

到目前为止我添加的修改:

/* Ninja Form mods */
.ninjacomment {
background: #ffbf00 …