Лучшее решение для ReactJs?

Question

В Angular2 + есть простое решение для проблемы привязки, мы ngModel для двусторонней привязки на различных входных и пользовательских элементах управления, но, по моему мнению, responseJs поддерживают проблему односторонней привязки.Пожалуйста, опишите лучшие практики двустороннего связывания в ReactJs.

Answer 1

Под двусторонним связыванием данных вы подразумеваете достижение эффекта, при котором, если данные изменяются в дочернем компоненте, они должны изменяться в родительском и наоборот.

Чтобы добиться этого, вы можете сделать следующее:в родительском компоненте определите функцию changeText

class Parent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            inputText: ""
        }
    }

    changeText(newText) {
        this.setState({
            inputText: newText
        })
    }

    ....
}

Передайте функцию changeText своему дочернему компоненту.

В своем дочернем компоненте используйте changeText следующим образом

function ChildComponent(props) {
    const handleChange = e => props.changeText(e.target.value)

    return (
        <input onChange={handleChange}></input>
    )
}

При этом, если inputText изменится с родительского или дочернего компонента, это изменение будет отражено в обоих.

Надеюсь, это поможет.