反應：將道具傳遞給功能組件

我對道具和功能組件有一個看似微不足道的問題。基本上，我有一個容器組件，它在狀態改變時呈現模態組件，這是由用戶點擊一個按鈕觸發的。模態是一個無狀態的功能組件，它包含一些需要連接到容器組件內部功能的輸入域。反應：將道具傳遞給功能組件

我的問題：如何在用戶與無狀態Modal組件內的表單字段進行交互時使用居於父組件內部的功能來更改狀態？我錯誤地傳遞道具嗎？提前致謝。

集裝箱

export default class LookupForm extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      showModal: false 
     }; 
    } 
    render() { 
     let close =() => this.setState({ showModal: false }); 

     return (
      ... // other JSX syntax 
      <CreateProfile fields={this.props} show={this.state.showModal} onHide={close} /> 
     ); 
    } 

    firstNameChange(e) { 
     Actions.firstNameChange(e.target.value); 
    } 
};

功能（模態）組分

const CreateProfile = ({ fields }) => { 
    console.log(fields); 
    return (
     ... // other JSX syntax 

     <Modal.Body> 
     <Panel> 
      <div className="entry-form"> 
      <FormGroup> 
       <ControlLabel>First Name</ControlLabel> 
       <FormControl type="text" 
       onChange={fields.firstNameChange} placeholder="Jane" 
       /> 
      </FormGroup> 
); 
};

實施例：說我想調用this.firstNameChange從模態分量內。我猜想把道具傳遞給功能組件的「解構」語法讓我有點困惑。即：

const SomeComponent = ({ someProps }) = > { // ... };

來源

2016-10-10 Jose

您將需要向下傳遞每個單獨的道具爲你需要調用

<CreateProfile 
    onFirstNameChange={this.firstNameChange} 
    onHide={close} 
    show={this.state.showModal} 
/>

和各功能然後在CreateProfile組件，你可以做

const CreateProfile = ({onFirstNameChange, onHide, show }) => {...}

解構它將分配匹配的屬性名稱/值給傳入的變量。名字只是要匹配的屬性

或只是做

const CreateProfile = (props) => {...}

，並在每個地方的呼叫props.onHide或任何道具您試圖訪問。

來源

2016-10-10 18:00:33 finalfreq

反應：將道具傳遞給功能組件

回答

相關問題