基于用户输入的条件渲染
Conditional rendering based on user input
我刚开始学习 React 并且正在为条件渲染而苦苦挣扎。我想根据表单输入渲染组件,但我不确定需要做什么或需要在哪里执行。
我已经导入了我的 Form 组件,它有我想使用的输入,还有另一个像这样的组件:
import React, {Component} from 'react';
import Form from './Form';
import CardOne from './CardOne';
import CardTwo from './CardTwo';
import CardThree from './CardThree';
export default class CardContainer extends Component {
render(){
return (
<div>
<CardOne />
<CardTwo />
<CardThree />
</div>
)
}
}
我基本上希望能够在提交表单时如果输入值大于 X 时显示某些卡片,但我不知道如何定位导入的组件。
这是我的表单组件:
export default class Form extends Component {
state = {
number: ''
};
change = (e) => {
this.setState({
[e.target.name]: e.target.value
});
};
onSubmit = e => {
e.preventDefault();
this.props.onSubmit(this.state);
this.setState({
number: ''
})
};
render(){
return (
<form>
<label>Number</label>
<input
type="number"
name="number"
placeholder="Number"
value={this.state.number}
onChange={e => this.change(e)} />
<button onClick={e => this.onSubmit(e)}>Submit</button>
</form>
)
}
}
我们将不胜感激任何帮助!
我已经重新设计了你的表单组件,下面是我的代码。 .如果您在这方面遇到任何问题,请告诉我。
import React, { Component } from 'react';
import CardOne from './CardOne';
import CardTwo from './CardTwo';
import CardThree from './CardThree';
export default class Form extends Component {
state = {
number: '',
showOne:true,
showTwo:false,
showThree:false,
userInputValue:''
};
change = (e) => {
this.setState({
userInputValue: e.target.value
});
};
onSubmit = e => {
e.preventDefault();
this.props.onSubmit(this.state);
if (this.state.userInputValue > 10 && this.state.userInputValue <20 ){
this.setState({
showTwo: true,
})
}
if (this.state.userInputValue > 20 && this.state.userInputValue < 30) {
this.setState({
showThree: true,
})
}
};
render() {
return (
<div>
<form>
<label>Number</label>
<input
type="number"
name="number"
placeholder="Number"
value={this.state.userInputValue}
onChange={e => this.change(e)} />
<button onClick={e => this.onSubmit(e)}>Submit</button>
</form>
<div>
{this.state.showOne ?
<CardOne />
:
<div></div>
}
{this.state.showTwo ?
<CardTwo />
:
<div></div>
}
{this.state.showThree ?
<CardThree />
:
<div></div>
}
</div>
</div>
)
}
}
// What i wrote above is your base functionality . You reedit the condition depends on ur requirement .
这是我按照你的卡片渲染逻辑想出来的。我没有更改 Form 组件,而是在 Container
上工作
export default class CardContainer extends Component {
constructor(props) {
super(props);
state = {
number: 0,
}
this.onFormSubmit = this.onFormSubmit.bind(this);
}
onFormSubmit=(number)=>{
this.setState({ number: number });
}
render(){
let i=Math.floor(this.state.number/10)
return (
<div>
<Form onSubmit={() => this.onFormSubmit(number)}
[<CardOne />, <CardTwo />, <CardThree/>].slice(0,i).map(card =>
{card}
)
</div>
)
}
}
我会使用 render prop 来解决这类问题。您可以研究更多关于渲染道具的信息,但基本上您的 CardContainer 组件不会按原样静态渲染这些卡片组件。它会 return props.children 代替。
然后你将有一个函数(即函数 TestX),它有一个条件来检查 X 的值是什么。这个函数将 return 要么 , , 基于 X 是什么。函数 TestX 将从 CardContainer 接收道具,包括从状态读取的 X 的值。
所以我将只使用 CardContainer 组件作为它的子组件。
我刚开始学习 React 并且正在为条件渲染而苦苦挣扎。我想根据表单输入渲染组件,但我不确定需要做什么或需要在哪里执行。
我已经导入了我的 Form 组件,它有我想使用的输入,还有另一个像这样的组件:
import React, {Component} from 'react';
import Form from './Form';
import CardOne from './CardOne';
import CardTwo from './CardTwo';
import CardThree from './CardThree';
export default class CardContainer extends Component {
render(){
return (
<div>
<CardOne />
<CardTwo />
<CardThree />
</div>
)
}
}
我基本上希望能够在提交表单时如果输入值大于 X 时显示某些卡片,但我不知道如何定位导入的组件。
这是我的表单组件:
export default class Form extends Component {
state = {
number: ''
};
change = (e) => {
this.setState({
[e.target.name]: e.target.value
});
};
onSubmit = e => {
e.preventDefault();
this.props.onSubmit(this.state);
this.setState({
number: ''
})
};
render(){
return (
<form>
<label>Number</label>
<input
type="number"
name="number"
placeholder="Number"
value={this.state.number}
onChange={e => this.change(e)} />
<button onClick={e => this.onSubmit(e)}>Submit</button>
</form>
)
}
}
我们将不胜感激任何帮助!
我已经重新设计了你的表单组件,下面是我的代码。 .如果您在这方面遇到任何问题,请告诉我。
import React, { Component } from 'react';
import CardOne from './CardOne';
import CardTwo from './CardTwo';
import CardThree from './CardThree';
export default class Form extends Component {
state = {
number: '',
showOne:true,
showTwo:false,
showThree:false,
userInputValue:''
};
change = (e) => {
this.setState({
userInputValue: e.target.value
});
};
onSubmit = e => {
e.preventDefault();
this.props.onSubmit(this.state);
if (this.state.userInputValue > 10 && this.state.userInputValue <20 ){
this.setState({
showTwo: true,
})
}
if (this.state.userInputValue > 20 && this.state.userInputValue < 30) {
this.setState({
showThree: true,
})
}
};
render() {
return (
<div>
<form>
<label>Number</label>
<input
type="number"
name="number"
placeholder="Number"
value={this.state.userInputValue}
onChange={e => this.change(e)} />
<button onClick={e => this.onSubmit(e)}>Submit</button>
</form>
<div>
{this.state.showOne ?
<CardOne />
:
<div></div>
}
{this.state.showTwo ?
<CardTwo />
:
<div></div>
}
{this.state.showThree ?
<CardThree />
:
<div></div>
}
</div>
</div>
)
}
}
// What i wrote above is your base functionality . You reedit the condition depends on ur requirement .
这是我按照你的卡片渲染逻辑想出来的。我没有更改 Form 组件,而是在 Container
上工作export default class CardContainer extends Component {
constructor(props) {
super(props);
state = {
number: 0,
}
this.onFormSubmit = this.onFormSubmit.bind(this);
}
onFormSubmit=(number)=>{
this.setState({ number: number });
}
render(){
let i=Math.floor(this.state.number/10)
return (
<div>
<Form onSubmit={() => this.onFormSubmit(number)}
[<CardOne />, <CardTwo />, <CardThree/>].slice(0,i).map(card =>
{card}
)
</div>
)
}
}
我会使用 render prop 来解决这类问题。您可以研究更多关于渲染道具的信息,但基本上您的 CardContainer 组件不会按原样静态渲染这些卡片组件。它会 return props.children 代替。
然后你将有一个函数(即函数 TestX),它有一个条件来检查 X 的值是什么。这个函数将 return 要么 , , 基于 X 是什么。函数 TestX 将从 CardContainer 接收道具,包括从状态读取的 X 的值。
所以我将只使用 CardContainer 组件作为它的子组件。