Question

我设法将输入组件渲染到dom上，但是在访问道具时遇到了一些麻烦。

功能输入组件

const InputField = props => {
  const { inputValue, updateInputValue } = props
  return (
    <Input>
      <input
        type="text"
        placeholder="Please specify"
        value={inputValue}
        onChange={updateInputValue}
      />
      <hr />
      <label>Other</label>
    </Input>
  )
}

仅根据数组内部的对象属性将组件呈现给dom

const MultiChoiceQuestions = props => {
  const { multiChoiceArray, handleClick } = props
  return (
    <ButtonContainer>
      {multiChoiceArray.map(questionChoice => {
        if (questionChoice.type === 'input') {
          return <InputField />
        }
        return (
          <Button type="button" key={questionChoice.id} onClick={() => handleClick(questionChoice)}>
            {questionChoice.text}
          </Button>
        )
      })}
    </ButtonContainer>
  )
}

再次导入multiChoice组件以创建应用程序使用的顶级组件

const Question = props => {
  let responses
  switch (props.data.type) {
    case 'multiChoice':
      responses = (
        <MultiChoiceQuestions
          multiChoiceArray={props.data.choices}
          handleClick={props.handleClick}
          inputValue={props.inputValue}
          updateInputValue={props.updateInputValue}
        />
      )
      break
    default:
      responses = <div>Error: no question type: `{props.data.type}`</div>
  }
  const { data } = props
  return (
    <AnimatedDiv key={data.id}>
      <QuestionText>{data.text}</QuestionText>
      {responses}
    </AnimatedDiv>
  )
}

最终组件看起来像这样

class Survey extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currentQuestionId: 1,
      userAnswers: [],
      isActive: false,
      inputValue: '',
    }
    this.selectAnswer = this.selectAnswer.bind(this)
    this.test = this.test.bind(this)
  }

  selectAnswer = answer => {
    this.setState(state => ({
      currentQuestionId: state.currentQuestionId + 1,
      userAnswers: state.userAnswers.concat([answer]),
      isActive: !state.isActive,
    }))
  }



  checkInput = event => {
    this.setState({
      inputValue: event.target.value,
    })
  }

  test = event => {
    console.log(event.target.value)
  }

  render() {
    const { currentQuestionId, isActive, inputValue } = this.state
    const { questions } = this.props
    const currentPercentage = (currentQuestionId * 100) / questions.length
    return (
      <SurveyContainer>
        <Question
          data={questions.find(q => q.id === currentQuestionId)}
          className={isActive ? 'active' : ''}
          handleClick={this.selectAnswer}
          value={inputValue}
          onChange={this.test}
        />            
      </SurveyContainer>
    )
  }
}

InputField组件呈现得很好，但是，我的onChange事件的函数未触发...管道中某处出现错误，可能在问题组件内部？

Answer 1

您似乎没有在<InputField />组件中将任何道具传递给MultiChoiceQuestions。

Answer 2

我看不到您从哪里传递道具

<MultiChoiceQuestions>
...
 <InputFiled props={props} />
...
</MultiChoiceQuestions>

可能仅传递InputField组件中需要的道具，例如inputValue, updateInputValue：

<InputFiled 
  inputValue={inputValue}
  updateInputValue={updateInputValue}
/>

const InputField = (inputValue, updateInputValue) => {

...
      <input
        type="text"
        placeholder="Please specify"
        value={inputValue}
        onChange={(e) => updateInputValue(e)}
      />
...

}

希望会有所帮助。

从子组件输入目标值

2 个答案: