傳遞值從陣營無國籍兒童家長

Question

背景

我試圖從一個陣營無國籍子組件（AddConditionSelect）到母部件（AddConditionDashboard）通過輸入值字段（conditionTitle），將保持我的狀態。

問題

我跟着React documentation所示的模型，但他們使用的是裁判，這隻有在組件是有狀態的作品。我不想在子組件中設置任何狀態，但仍然能夠訪問父項中的輸入。

在目前的形式中，我得到一個警告，無狀態函數組件不能被給予引用，導致道具爲空和未定義。

父組件：

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 extends React.Component { 

    onInputChange: function() { 
    this.props.onUserInput(
     this.refs.conditionTitleInput.value, 
    ) 
    }, 

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

    return (
     <div> 

     <Panel theme="info"> 

     <Divider /> 

     Please enter a name {error ? <Message inverted={true} rounded={true} theme="error">{error}</Message> : null} 
      <Input value={this.props.conditionTitle} ref="conditionTitleInput" label="" type="text" buttonLabel="Add Condition" name="add_segment" onChange={this.onInputChange} placeholder="Condition Title"/> 

     </Panel> 
    </div> 
    ); 
    } 

} 
export default AddConditionSelect; 

Answer 1

如何直接傳遞的事件處理程序<Input>？您可以直接通過關於變更事件到父這樣（的<Input>祖父母），你可以提取event.target.value的值，因此沒有必要使用裁判：

注：可能必須bind的onUserInputChange()在上下文你父類的構造，因爲事件處理程序對事件發生的時間作爲他們的背景下默認元素：

家長

class AddConditionDashboard extends React.Component { 

    constructor(props) { 
    // ... 

    // bind the context for the user input event handler 
    // so we can use `this` to reference `AddConditionDashboard` 
    this.onUserInputChange = this.onUserInputChange.bind(this); 
    } 

    onUserInputChange({ target }) { 
    const { value: conditionTitle } = target; 
    this.setState({ 
    conditionTitle 
    }); 
    } 

    render() { 
    // ... 

    <AddConditionSelect segmentId={segmentId} 
         conditionTitle={this.state.conditionTitle} 
         onUserInputChange={this.onUserInputChange} // <-- pass event handler to child that will pass it on to <Input> 
    /> 

    // ... 
    } 
    // ... 

兒童：

class AddConditionSelect extends React.Component { 

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

    return (
     <div> 
     // ... 

     <Input value={this.props.conditionTitle} 
       label="" 
       type="text" 
       buttonLabel="Add Condition" 
       name="add_segment" 
       onChange={this.props.onUserInputChange} // <-- Use the grandparent event handler 
       placeholder="Condition Title" 
     /> 

     // ... 
    </div> 
    ); 
    } 
} 

Answer 2

1. 你並不需要裁判。值可以從事件中提取。因此，你的孩子組件變得更簡單。

2. 您可以使用value link pattern進一步簡化您的代碼。

   類AddConditionDashboard延伸React.Component { 構造（道具）{ 超級（道具）;

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

   }

   渲染（）{ 常量{錯誤，segmentId} =此。道具;

   return (
       <div> 
   
       <AddConditionSelect segmentId={segmentId} conditionTitle={ Link.state(this, 'conditionTitle') } /> 
   
   
       <PanelFooter theme="default"> 
       <Button backgroundColor="primary" color="white" inverted={true} rounded={true} onClick={(event) => this.onSubmit(event)}> 
        Next Step 
       </Button> 
       </PanelFooter> 
   
       </div> 
   ); 
   

   }

   }

   出口默認AddConditionDashboard;

和子組件

const AddConditionSelect = ({ error, valueLink }) => (
    <div> 

    <Panel theme="info"> 

    <Divider /> 

    Please enter a name { error ? 
          <Message inverted={true} rounded={true} theme="error"> 
           {error} 
          </Message> : null } 
     <Input value={ valueLink.value } 
       onChange={ e => valueLink.set(e.target.value) } 
       label="" type="text" 
       buttonLabel="Add Condition" name="add_segment" 
       placeholder="Condition Title"/> 

    </Panel> 
    </div> 
); 

export default AddConditionSelect;