在父状态更改时更新子道具

Question

I've parent component with state which contains task and child which handles input that changes it's name. Input uses his own name state for inputs value. After submit or blur parents function is invoked to update state of parents task.name . In parent on componentDidUpdate() is new state sent to the server via websocket and server sends changes to another clients.

My component keep value because it is in it's state but in another clients (which has just recieved new value from server) it is unchanged because value of input has been set only in componentDidMount() . How do I force new state to these child components?

Parent

componentDidMount() {
    //Recieve changed data from server. This updates the state of all tasks, but doesn't invoke change of Child component because value has been set only in componentDidMount()
    ioClient.on("onDataChanged", (data) => {
        this.setState({tasks: data.tasks});
    });
}

componentDidUpdate() {
    //Sends data to server and invokes change in another clients
    ioClient.emit('onDataChanged',this.state);
}

onTaskUpdate(task) {
    const updatedTasks = this.state.tasks;
    updatedTasks[task.id] = task;
    const newState = {...this.state, tasks: updatedTasks};
    this.setState(newState);
}

render() {
    return (
        {/* ... some code and for cycle of this.state.tasks */}
            <Task key={task.id} 
                  task={task}
                  onTaskUpdate={this.onTaskUpdate}
            />
        {/* ... */}
    );
}

Child (Task)

constructor(props) {
    super(props);
    this.state = {name: ''};

    this.handleInputChange = this.handleInputChange.bind(this);
    this.nameFormSubmit = this.nameFormSubmit.bind(this);
}

componentDidMount() {
    // component is already mounted so parents change doesn't invoke this again
    this.setState({name: this.props.task.name});
}

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

nameFormSubmit(e) {
    e.preventDefault();
    let updatedTask = {...this.props.task, name: this.state.name};
    this.props.onUpdate(updatedTask);
}

render() {
    return (
        <form onSubmit={(e) => this.nameFormSubmit(e)}>
            <input type="text"
                   name="name"
                   value={this.state.name}
                   onChange={this.handleInputChange}
             />
        </form>
    );
}

I'm using components own state because I don't want to send to server each pressed key but just final state of input. Expected result: Emit/send changed inputs name only on submit, not with every change

Answer 1

My current solution which works but I am not happy with it because I don't think it's properly resolved.

I've used getDerivedStateFromProps and new state focused to indicate if state has to be replaced. Toggling the focused state onFocus and onBlur .

Updated Child component below:

Child (Task)

constructor(props) {
    super(props);
    this.state = {
        name: '',
        focused: false
    };
    this.toggleFocusedState = this.toggleFocusedState.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.nameFormSubmit = this.nameFormSubmit.bind(this);
}

static getDerivedStateFromProps(props, state) {
    return !state.focused ? {name: props.task.name} : null;
}

toggleFocusedState(state) {
    this.setState({focused:state});
}

componentDidMount() {
    this.setState({name: this.props.task.name});
}

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

nameFormSubmit(e) {
    e.preventDefault();
    let updatedTask = {...this.props.task, name: this.state.name};
    this.props.onUpdate(updatedTask);
}

render() {
    return (
        <form onSubmit={(e) => this.nameFormSubmit(e)}>
            <input type="text"
                   name="name"
                   value={this.state.name}
                   onChange={this.handleInputChange}
                   onFocus={()=>this.toggleFocusedState(true)}
                   onBlur={()=>this.toggleFocusedState(false)}
             />
        </form>
    );
}