無狀態功能元件之間的通訊

在這個例子中，我們將使用 Redux 和 React Redux 模組來處理我們的應用程式狀態，並自動重新渲染我們的功能元件。，andtourse React 和 React Dom

你可以在這裡檢視完成的演示

在下面的示例中，我們有三個不同的元件和一個連線的元件

• UserInputForm ：此元件顯示輸入欄位。當欄位值更改時，它會呼叫 props 上的 inputChange 方法（由父元件提供），如果還提供了資料，則會在輸入欄位中顯示該欄位。

• UserDashboard ：這個元件顯示一個簡單的訊息，也可以嵌入 UserInputForm 元件，它還將 inputChange 方法傳遞給 UserInputForm 元件，UserInputForm 元件使用此方法與父元件進行通訊。

  • UserDashboardConnected ：該元件使用 ReactRedux connect 方法包裝 UserDashboard 元件。這使我們更容易管理元件狀態並在狀態更改時更新元件。

• App ：這個元件只是渲染 UserDashboardConnected 元件。

const UserInputForm = (props) => {
  
  let handleSubmit = (e) => {
    e.preventDefault();
  }

  return(
    <form action="" onSubmit={handleSubmit}>
      <label htmlFor="name">Please enter your name</label>
      <br />
      <input type="text" id="name" defaultValue={props.data.name || ''} onChange={ props.inputChange } />
    </form>
  )

}

const UserDashboard = (props) => {
   
  let inputChangeHandler = (event) => {
    props.updateName(event.target.value);
  }

  return(
    <div>
      <h1>Hi { props.user.name || 'User' }</h1>
      <UserInputForm data={props.user} inputChange={inputChangeHandler} />
    </div>
  )

}

const mapStateToProps = (state) => {
  return {
    user: state
  };
}
const mapDispatchToProps = (dispatch) => {
  return {
    updateName: (data) => dispatch( Action.updateName(data) ),
  };
};

const { connect, Provider } = ReactRedux;
const UserDashboardConnected = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserDashboard);

const App = (props) => {
  return(
    <div>
      <h1>Communication between Stateless Functional Components</h1>
      <UserDashboardConnected />
    </div>
  )
}

const user = (state={name: 'John'}, action) => {
  switch (action.type) {
    case 'UPDATE_NAME':
      return Object.assign( {}, state, {name: action.payload}  );

    default:
      return state;
  }
};

const { createStore } = Redux;
const store = createStore(user);
const Action = {
  updateName: (data) => {
    return { type : 'UPDATE_NAME', payload: data }
  },
}

ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('application')
);

JS Bin URL