Материал-ui selectField значение изменения [дубликат]

сам компонент меняет свое состояние и не меняет своего, а реквизит для детей.

<Parent>
  <Child name={ this.state.childName } />
</Parent>

Родитель может изменить свое собственное состояние и изменить дочернее имя, но он изменит реквизиты для его детей.

edit1: для вызова событий от дочернего элемента к его родительскому элементу вы должны передать дочернему процессу такой обработчик событий:

var Child = React.createClass({
  render: function() {
    return (<button onClick={ this.props.onClick }>Hey</button>);
  }
});

var Parent = React.createClass({
  onChildClick: console.log.bind(console), // will print the event..
  render: function() {
    return (<Child onClick={ this.onChildClick } />);
  }
});

React.renderComponent(<Parent />, document.body);

в этом коде, когда вы Нажмите кнопку «Ребенок», чтобы передать событие родителям. целью передачи событий является развязка компонентов. возможно, в вашем приложении вам нужно это конкретное действие, но в другом приложении у вас будет, вы будете использовать его по-другому.

Вопреки приведенным здесь ответам, вы можете напрямую обновить реквизиты, если не возражаете против того, чтобы педантичный кружок рассказывал о «Реагировании». В React.js найдите следующие строки кода:

Object.freeze(element.props);
Object.freeze(element);

и закомментируйте их. Voila, изменяемые реквизиты!

Мое решение было довольно иным, но некоторые люди могли столкнуться с этим. В инструментах Chrome Dev он продолжал говорить, что мои реквизиты были только для чтения, и когда я попытался передать их еще дальше, я бы получил ошибку. Теперь причина в том, что я не вызывал метод render(). Я вместо этого вызывал свой компонент следующим образом:

const Navigation = () =>{

    return (
        <div className="left-navigation">
            <ul>
                <Link to='/dashboard'><li>Home</li></Link>
                <Link to='/create-seedz'><li>Create Seedz</li></Link>
                <Link to='/create-promotion'><li>Create Promotion</li></Link>
                <Link to='/setting'><li>Setting</li></Link>
                <SignOutButton  />
            </ul>
        </div>
    );
}

Я добавил метод рендеринга, и он решил мою проблему о возможности передачи реквизита вниз:

class Navigation extends Component{
render(){
    return (
        <div className="left-navigation">
            <ul>
                <Link to='/dashboard'><li>Home</li></Link>
                <Link to='/create-seedz'><li>Create Seedz</li></Link>
                <Link to='/create-promotion'><li>Create Promotion</li></Link>
                <Link to='/setting'><li>Setting</li></Link>
                <SignOutButton user={this.props.user} signedOut={this.props.signedOut} authed={this.props.authed}/>
            </ul>
        </div>
    );
}
}

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

Философия Реагента заключается в том, что реквизит должен быть неизменным и сверху вниз. Это означает, что родитель может отправлять любые значения поддержки, которые ему нравятся для ребенка, но ребенок не может изменять свои собственные реквизиты. Что вы делаете, это реагировать на входящие реквизиты, а затем, если хотите, изменить состояние вашего ребенка на основе входящих реквизитов.

Таким образом, вы никогда не обновляете свои собственные реквизиты или реквизит родителя. Когда-либо. Вы только обновляете свое собственное состояние и реагируете на значения prop, которые вы даете родителям.

Если вы хотите, чтобы какое-то действие произошло над дочерним элементом, который изменяет что-то в состоянии, то то, что вы делаете, проходит обратный вызов ребенку, который он может выполнить при данном действии. Этот обратный вызов может затем изменить состояние родителя, которое по очереди может отправлять разные реквизиты ребенку при повторной визуализации.

Чтобы ответить на вопрос о том, почему

In React, реквизит протекает вниз, от родителя до дочернего .

Это означает, что когда мы вызываем ReactDOM.render, React может отображать корневой узел, пропускать любые реквизиты, а затем забывать об этом узле. Это сделано. Это уже сделано.

Это происходит у каждого компонента, мы его визуализируем, а затем переходим вниз по дереву с глубиной.

Если компонент может мутировать его реквизит, мы будем менять объект, который доступен для родительского узла после того, как родительский узел уже был обработан. Это может вызвать все виды странного поведения, например, user.name может иметь одно значение в одной части приложения и другое значение в другой части, и оно может обновиться при следующем запуске рендеринга.

Чтобы вывести вымышленный пример:

// App renders a user.name and a profile
const App = (props) => 
  React.createElement('div', null, [
    props.user.name,
    React.createElement(Profile, props}
  ])

// Profile changes the user.name and renders it
// Now App has the wrong DOM.
const Profile = ({user}) => {
  user.name = "Voldemort" // Uh oh!
  return React.createElement('div', null, user.name);
}

// Render the App and give it props
ReactDOM.render(
  React.createElement(App, {user: {name: "Hermione"}}), 
  document.getElementById('app'))
);

Отправляем приложение. Он выводит «Гермиону» в «Теневой ДОМ». Мы представляем профиль, он выводит «Волдеморт». Приложение теперь неправильно. Он должен сказать «Волдеморт», потому что user.name - «Волдеморт», но мы уже выводим «Гермиону», и уже слишком поздно его менять.

Значение будет различным в разных частях приложения.

Модификация реквизита была бы двусторонней привязкой

. Мутирующие реквизиты были бы формой двух -внешняя привязка. Мы будем изменять значения, на которые может положиться другой компонент, расположенный выше дерева.

Угловое 1 имело это, вы могли бы изменять любые данные в любое время, где бы вы ни были. Для работы ему понадобился циклический $ digest. В принципе, он будет перемещаться вокруг и вокруг, повторно рендерируя DOM, пока все данные не закончили распространение. Это было частью причины, по которой Угловой 1 был настолько медленным.

В режиме React state и props выполняют разные цели: state позволяет компоненту поддерживать некоторые изменяющиеся значения, а props - это mecanism для распространения этих значений для детей.

Детям не разрешается самостоятельно изменять ценности, которые они получают через реквизиты, только потому, что дизайнерам React легче поддерживать приложение, построенное таким образом. Их точка зрения заключается в том, что, когда только одному компоненту разрешено обновлять некоторую часть состояния, легче обнаружить, кто его изменил, и найти корень ошибок.