为 React、Redux 和 API 添加条件

Question

我想知道如何使用 React、Redux 和 API 更新表单。我想向我的组件添加一个条件。好像页面处于编辑模式，我想将页面更改为编辑模式，如果不是，则按正常方式呈现页面。

我希望用户能够进行更新并将这些更改保存到后端。

class SingleCampus extends React.Component {
  componentDidMount() {
    this.props.getUser(this.props.match.params.id);
  }

  render() {
    const { User } = this.props;
    const hasTest = user.tests && user.tests.length;

return (
  <div>
    <div className="single-user">
      <h1>{user.name}</h1>
      <im`enter code here`g src={user.imageUrl} alt={user.name} />
      <h3>
        <b>Address:</b>
        {user.address}
      </h3>
      <b>Description:</b>
      <p> {user.description}</p>
    </div>
    <hr />
    {hasTest ? (
      <React.Fragment>
        <div>
         
          {user.tests.map((test) => {
            return (
              <span key={test.id}>
                <Link to={`/test/${test.id}`}>
                  <h3>
                    {test.grade} 
                  </h3>
                </Link>
         
              </span>
            );
          })}
        </div>
      </React.Fragment>
    ) : (
      <h2>There are no test for this user!</h2>
    )}
  </div>
  );
  }
}
const mapState = (state) => ({
  user: state.user,
});

const mapDispatch = (dispatch) => ({
  getUser: (id) => {
    dispatch(fetchSingleUser(id));
  },
});


`

Answer 1

一个简单的方法是向你的状态添加一个变量，（无论是本地状态还是 Redux 状态）例如

// I suppose this is your Redux state used to map state to props?
const mapState = (state) => ({
  user: state.user,
  isDisabled: state.isDisabled,
});

将组件中的文本值更改为文本框，您可能需要使用一些 UI 包，例如 Material UI.
然后，将其禁用取决于您的 isDisabled 状态值此外，在值更改时，您需要实施以发送更新后的值。

import TextField from '@material-ui/core/TextField';
......
      <b>Description:</b>
      <p> {user.description}</p>
      <TextField
        value={user.description}
        onChange={handleChange}  // update description value and dispatch the user object
        InputProps={{
          readOnly: props.isDisabled,
        }}
      />

最后，如果在只读模式下添加一个按钮来更改isDisabled值，在编辑模式下处理保存

import Button from '@material-ui/core/Button';
......
      <Button 
        variant="contained"
        onClick={handleEditSave}  // handle edit/save logic
      >{props.isDisabled ? `Edit` : `Save`}        
      </Button>

为 React、Redux 和 API 添加条件

Adding conditional to react, redux, and API

javascript

reactjs

redux

react-redux

react-forms