更新 - 从功能性子组件更改状态

Question

我有三个组件，其中 App 是父组件（基于类）和两个子组件（基于功能）名为 User & Input时间>。我已将用户导入应用程序并将输入导入用户。我想通过 Input(there is a button -> onClick) 中的值更改名称。

更新 问题是 App.jsx 中的函数（我很确定我尝试这样做的方式是正确的）。

// App.jsx
Imported User

state = {
    users : [
        {id: 1, fullName: 'Amirreza Amini'},
        {id: 2, fullName: 'John Smith'},
        ...
    ]
};

handleChangeName = name => {
    const editedUsers = [...this.state.users];
    const users = editedUsers.map(user => user.fullName = name);

    this.setState({ users });
};

render() {
    const { users } = this.state;

    const userComponent = users.map(user => (

        <User
            key={user.id}
            fullName={user.fullName}
            edit={() => this.handleChangeName(user.fullName)}
        />

    ));
  

.

// User.jsx
Imported Input

const User = ({ fullName }) => {
    return (
        <section>
            <h1>{ fullName }</h1>

            <Input fullName={fullName} />
        </section>
    );
};

export default User;

.

// Input.jsx

const Input = ({ fullName }) => {
    return (
        <section>
            {/* The value of this input must be the fullName after I clicked the button */}
            <input className="user-edit-input" placeholder={fullName} />
            
            <button className="edit-button" onClick={edit(document.querySelector('.user-edit-input').value)}>Change</button>
        </section>
    );
};

export default Input;

Answer 1

我认为有两个大的选择：

选项一正在将 App.jsx 更改为功能组件，并发送函数将全名更改为 User.jsx 和 Input.jsx 作为道具，让 Input 组件自行更改值

选项二可以让您的 App.jsx 组件保持原样，使其更加安全，并允许子组件只处理它实际需要知道的内容，类似地从父 App 组件，因此 Input 组件可以触发发送旧全名和新全名，父组件函数将处理其余的过程。

父函数示例：

const updateFullname = (previousName, newName) => {
    // Get previous object data and location in array
    let originalUsersState = this.state.users;
    let originalUser = originalUsersState.filter(
        (user, index) => user.fullName === previousName
    )
    const originalUserIndex = originalUsersState.findIndex(
        (user, index) => user.fullName === previousName
    )
    
    // Create new updated object and insert it to updated object array
    let updatedUser = originalUser
    updatedUser.fullName = newName;
    let updatedUsersState = originalUsersState;
    updatedUsersState[originalUserIndex] = updatedUser;

    // Update the state with the new updated object array
    this.setState(
        {
            users: updatedUsersState
        }
    );
}

具有新提议功能和流程的问题代码解决方案的缩写：

// App.jsx
Imported User

state = {
    users : [
        {id: 1, fullName: 'Amirreza Amini'},
        {id: 2, fullName: 'John Smith'},
        ...
    ]
};

handleChangeName = name => {
    const editedUsers = [...this.state.users];
    const users = editedUsers.map(user => user.fullName = name);

    this.setState({ users });
};

const updateFullname = (previousName, newName) => {
    // Get previous object data and location in array
    let originalUsersState = this.state.users;
    let originalUser = originalUsersState.filter(
        (user, index) => user.fullName === previousName
    )
    const originalUserIndex = originalUsersState.findIndex(
        (user, index) => user.fullName === previousName
    )

    // Create new updated object and insert it to updated object array
    let updatedUser = originalUser
    updatedUser.fullName = newName;
    let updatedUsersState = originalUsersState;
    updatedUsersState[originalUserIndex] = updatedUser;

    // Update the state with the new updated object array
    this.setState(
        {
            users: updatedUsersState
        }
    );
}

render() {
    const { users } = this.state;

    const userComponent = users.map(user => (

        <User
            key={user.id}
            fullName={user.fullName}
            updateFullname={updateFullname} 
            edit={() => this.handleChangeName(user.fullName)}
        />

    ));

// User.jsx
Imported Input

const User = ({ fullName, updateFullname }) => {
    return (
        <section>
            <h1>{ fullName }</h1>

            <Input fullName={fullName} updateFullname={updateFullname} />
        </section>
    );
};

export default User;

// Input.jsx

const Input = ({ fullName }) => {
    const [inputValue, setInputValue] = useState(undefined);

    return (
        <section>
            <input className="user-edit-input" value={inputValue} onChange={event => setInputValue(event.target.value)} placeholder={fullName} />
            
            <button className="edit-button" onClick={(fullname, inputValue) => updateFullname}>Change</button>
        </section>
    );
};

export default Input;

Answer 2

您可以将输入作为道具发送到用户组件的回调。从Users，通过回调函数，再调用一个函数来设置User组件的状态