Question

我有一个表格，其中包含步骤名称，电子邮件，实用程序。当有输入时，我可以获取值插入，但是当具有输入选项true或false的有输入按钮时，则无法获取值。

这是我的代码：

class CreateData extends Component {
state = {
    step: 1,
    nome:'',
    email:'',
    util: '',
}

nextStep = () => {
    const { step } = this.state
    this.setState({
        step : step + 1
    })
}

prevStep = () => {
    const { step } = this.state
    this.setState({
        step : step - 1
    })
}

handleChange = input => event => {
    this.setState({ 
        [input] : event.target.value, 
    })
}

renderSwitch(step) {


    const { nome, email,  util } = this.state;
    const values = { nome, email, util};

    switch (step) {
        case 1:
        return <UserName
        nextStep = {this.nextStep}
        handleChange = {this.handleChange}
        values = {values}
        />
        case 2:
        return <UserEmail
        nextStep = {this.nextStep}
        prevStep = {this.prevStep}
        handleChange = {this.handleChange}
        values = {values}
            />
            case 3:
            return <UserUtil
            nextStep = {this.nextStep}
            prevStep = {this.prevStep}
            handleChange = {this.handleChange}
            values = {values}
            />

            case 4:
            return <CrossHomePage/>
        }
    }
    render() {

        const {step} = this.state;

        return (
            <div>
                <HeaderPage />
                {this.renderSwitch(step)}
            </div>
        );
      }
}

export default CreateData

在我的组件中获取名称是可以的：

class UserName extends Component{

saveAndContinue = (e) => {
    e.preventDefault()
    this.props.nextStep()
}

render(){

    const { values } = this.props;

    return(
        <Grid className={style.container}>
            <Form>
                <fieldset>
                    <input
                    className="input"
                    onChange={this.props.handleChange('nome')}
                    defaultValue={values.nome}
                    type="text"
                    required
                    />
                </fieldset>
                <Button className="button" onClick={this.saveAndContinue}> Continue </Button>
            </Form>
        </Grid>
    )
}
}

export default UserName;

但是在我的组件中获取按钮值无效，我想让按钮的值被单击。

<input 
type="button"
className="input"
onChange={values.moradia[1]}
value='yes'
defaultValue={values.util}
onClick={ this.saveAndContinue }
/>
<input 
type="button"
className="input"
onChange={values.util}
value='no'
defaultValue={values.util}
onClick={ this.saveAndContinue }
/>

在这种情况下，如何获得单击的按钮的值并保存该值以在另一个组件中调用？

此处为示例。我想获得按钮的价值是或否 https://codesandbox.io/s/r1lm9j22l4

Answer 1

使用event.target.value

为Button添加值属性

 <Button className="button" value="continue" onClick={this.saveAndContinue}> Continue </Button>

  saveAndContinue = (e) => {
       e.preventDefault();
       console.log(e.target.value); //will give you the value continue
       this.props.nextStep();
  }

热门获得按钮的价值

1 个答案: