То, что вы спросили здесь, на самом деле довольно распространенный и стандартный способ изменения входных данных через дочерний компонент.Вы сохраните свое состояние в родительском компоненте, передадите некоторые части этого состояния и свои функции-обработчики своему дочернему компоненту, а затем обновите состояние.
- Дочерний компонент может быть и большую часть временидолжен быть безгражданским, тупым компонентом.Потому что нет необходимости в состоянии или методе жизненного цикла.
- Ваши входы контролируются.Это означает, что есть обработчик изменений для обновления вашего состояния, и они снова получают значение из состояния.
- Вы можете изменить входные данные в одной функции обработчика по именам.
остальное в комментариях :) Кстати, если вы не смотрите официальную документацию, я настоятельно рекомендую вам сначала сделать это.
class App extends React.Component {
state = {
firstName: "",
lastName: "",
name: ""
};
handleClick = () => {
const { firstName, lastName } = this.state;
// We create our name then update our state.
const name = `${firstName} ${lastName}`;
this.setState({ name });
};
// One handler function to update the state.
// Using computed property names feature we can use
// variables for an object key like [name]
handleChange = e => {
// Destructuring values from e.target.
const { name, value } = e.target;
this.setState({ [name]: value });
};
render() {
const { firstName, lastName, name } = this.state;
return (
<div>
{/* A small condition check for our welcome. If there isn't any
firstName or lastName, then we render "anonymous". */}
<h1>
Welcome,
{!name ? " anonymous" : name}
</h1>
{/* Here, we are passing onClick and onChange handlers. Also our related state pieces. */}
<InsertName
firstName={firstName}
lastName={lastName}
onClick={this.handleClick}
onChange={this.handleChange}
/>
</div>
);
}
}
const InsertName = props => {
// More destructuring.
const { firstName, lastName, onClick, onChange } = props;
return (
// One onChange handler for each input.
// Also, input names should match with the state names.
<div>
First name:{" "}
<input
type="text"
name="firstName"
value={firstName}
onChange={onChange}
/>
<br />
Last name:{" "}
<input type="text" name="lastName" value={lastName} onChange={onChange} />
<br />
<button onClick={onClick}>Click here!!</button>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>