反应：将道具传递给功能组件

我对道具和功能组件有一个看似微不足道的问题。基本上，我有一个容器组件，它在状态改变时呈现模态组件，这是由用户点击一个按钮触发的。模态是一个无状态的功能组件，它包含一些需要连接到容器组件内部功能的输入域。反应：将道具传递给功能组件

我的问题：如何在用户与无状态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

反应：将道具传递给功能组件

回答

相关问题