javascript - 使用用户输入更新值

Question

我有一个输入字段，当您为该特定用户单击提交时，我想更新该用户的名字。现在我在 handleSubmit 中有一个警报，只是看看它是否有效。它是，但我希望它更新实际用户名。

在单独的卡片上显示用户。希望编辑按钮适用于每个用户。

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
      names: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value
    });
  }

handleSubmit(event) { 
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }
  render() {

    return (
      <div className='UserCard'>
        <div className='UserCardTop'>
          <form className='Submit' onSubmit={this.handleSubmit}>
            <input
              type="text"
              name="names"
              value={this.state.names}
              ref={this.input}
              onChange={this.handleChange} />
            <input type="submit" value="Submit" />
          </form>
          <h3>{this.props.name} {this.props.last}</h3>
          <div className='ImageContainer'>
          <img alt="image" width="80" src={this.props.image} />
          </div>
        </div>        
        <div className='UserCardBottom'>

          <h5>{this.props.email}</h5>
          <h5>{this.props.cell}</h5>
          <h5>{this.props.city}, {this.props.state}</h5>
        </div>
      </div>
    )
  }
}
export default User

App.js

import React, { Component } from "react";
import axios from "axios";
import User from './User'
import Filter from './Filter.js'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      searchTerm: '',
      alphabetical: 'az'
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleFilter = this.handleFilter.bind(this);   

  }

  componentDidMount() {
    axios.get("https://randomuser.me/api/?page=3&results=10&seed=abc")
      .then(response => {
        console.log(response.data.results);
        this.setState({ users: response.data.results });
      })
      .catch(error => {
        console.log(error);
      });
  }
  handleFilter(filterInput) {
    this.setState(filterInput)
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    let sortedUsers;
    if (this.state.alphabetical === "az") {
      console.log("sorted");
      sortedUsers = this.state.users.sort((a, b) =>
        a.name.first > b.name.first ? 1 : -1
      );
    }

    let filteredUsers = sortedUsers;

    if (this.state.searchTerm)
      filteredUsers = this.state.users.filter(u =>
        u.name.first.startsWith(this.state.searchTerm) || u.name.last.startsWith(this.state.searchTerm)
      );

    const userNames = filteredUsers.map(u => {
      return <User
        key={u.email}
        name={u.name.first}
        last={u.name.last}
        image={u.picture.large}
        email={u.email}
        city={u.location.city}
        state={u.location.state}
        cell={u.cell}
      />;
    });

    return (
      <div>
        <Filter
          searchTerm={this.state.searchTerm}
          onFilter={this.handleFilter}
        ></Filter>
        <select
          name="alphabetical"
          value={this.state.alphabetical}
          onChange={this.handleChange}>
          <option value="az">
            A to Z
          </option>
          <option value="za">Z to A</option>
        </select>

        {userNames}
      </div>
    );
  }
}
export default App

Answer 1

一个简单的解决方案是添加一个 onChangeFirst回调 Prop 到你的 User组件，将在 handleSubmit() 时使用新名字调用被称为:

User.js

handleSubmit(event) { 
  event.preventDefault();

  if(this.props.onChangeFirst) {
    /* Pass this users state (with names data) to onChange callback */
    this.props.onChangeFirst(this.state.names);
  }
}

onChangeFirst回调 Prop 将“连接”到 App组件，以便在调用它时(从 User.js 内部)，相应的用户对象(在 App.js 中)更新为 newFirstName .您可以添加 onChangeUserFirstName()功能如下所示，它更新了first user 的领域App 中的对象组件状态:

App.js

/* Helper function that updates first name state for matching user */
const onChangeUserFirstName = (user, newFirstName) => {

    /* Updates state with newly mapped users to new array, where first name
    if updated to that supplied in changes.names for existing user match */
    this.setState({ users : this.state.users.map(u => {
      return (u === user) ? { ...u, first : newFirstName } : u;
    });
  });
}

const userNames = filteredUsers.map(u => {
  /* Add (newFirstName) => onChangeUserFirstName(u, newFirstName) */
  return <User
    onChangeFirst={ (newFirstName) => onChangeUserFirstName(u, newFirstName) }
    key={u.email}
    name={u.name.first}
    last={u.name.last}
    image={u.picture.large}
    email={u.email}
    city={u.location.city}
    state={u.location.state}
    cell={u.cell}
  />;
});