Html 使用按钮onClick事件而不是输入onChange事件来更改React中的状态

我目前正在尝试React，我正在尝试根据用户输入的内容更改div的背景颜色。除了App组件之外，我已经创建了一个带有按钮的输入元素的输入组件，但是如果没有onChange事件，我无法键入输入元素，这是我所期望的。我不确定如何通过点击按钮而不是onChange事件来更改状态变量（App.js中的“color”）的状态

我的App.js

const AppDiv = styled.div 
`margin: 0;
box-sizing: border-box;
display: flex;
width: 100%;
`

class App extends Component {

  state = {
    color: ' ',
    name: null
  }

  colorchange = (event) => {
    event.preventDefault();
    this.setState({
      color: event.target.value
    })
  }
  
  render(){
    return (
      <AppDiv>
        <Input
        name = {this.state.name}
        colour = {this.state.color}
        colourChange = {this.colorchange}
        Changecolour = {this.changecolour}
        /> 
      </AppDiv>
    )
  }
}

const AppDiv=styled.div
`保证金：0；
框大小：边框框；
显示器：flex；
宽度：100%；
`
类应用程序扩展组件{
状态={
颜色：''，
名称：空
}
颜色更改=（事件）=>{
event.preventDefault（）；
这是我的国家({
颜色：event.target.value
})
}
render（）{
返回(
)
}
}

Input.js

const ColorButton = styled.button
` 
  width: 100px;
  height: 50px;
  border-radius: 24px/50%;
  background-color: green;
  margin: 10px;
`

const ColorDiv = styled.div
`
height: 100vh;
flex-basis: 300px;
background-color: ${props => props.colour};   //Changing background with 'colour' prop 
`

const input = (props) => {

    return (
        <ColorDiv>
            <h2>What is your name</h2>
            <input type = "text" value = {props.name}/>
            <h2>Choose your colour</h2>
            <input type = "text" value = {props.colour} />
            <ColorButton onClick = {props.colourChange}> Change Colour </ColorButton>
        </ColorDiv>
    )
}

const ColorButton=styled.button
` 
宽度：100px；
高度：50px；
边界半径：24px/50%；
背景颜色：绿色；
利润率：10px；
`
const ColorDiv=styled.div
`
高度：100vh；
弹性基准：300px；
背景色：${props=>props.color}//使用“颜色”道具更改背景
`
常量输入=（道具）=>{
返回(
你叫什么名字？
选择你的颜色
变色
)
}

---

我正在使用样式化组件应用样式化。如有任何建议或帮助，将不胜感激。谢谢你

实现你正在做的事情的最好方法是拥有两个状态。一个用于您在

中输入的文本，另一个用于您希望背景的颜色

在应用程序中

 state = {
    colorText: null,
    backgroundColor: null,
  }

onTextChange = (e) => {
    this.setState({
      colorText: event.target.value
    })
}

onUpdateBackgroundColor = () => {
   this.setState({
     backgroundColor: this.state.colorText
   })
}

.......
 <Input
        colour = {this.state.colorText}
        backgroundColor={this.state.backgroundColor}
        onTextChange = {this.onTextChange}
        updateBackgroundColor = {this.onUpdateBackgroundColor}
  /> 

变色

---

注意：为了更好地执行此操作，您应该将状态移动到输入中，因为将状态保留在父组件中，并且在每次输入更改时更新状态将导致大量渲染

您可以为输入使用ref，也可以不控制它

export default function App() {
  const [color, setColor] = React.useState("");
  const inputRef = React.useRef();
  return (
    <div className="App">
      <h1>Your Color: {color}</h1>
      <input ref={inputRef} />
      <button
        onClick={() => {
          setColor(inputRef.current.value);
        }}
      >
        Update Color
      </button>
    </div>
  );
}

导出默认函数App（）{
const[color，setColor]=React.useState（“”）；
const inputRef=React.useRef（）；
返回(
您的颜色：{Color}
{
设置颜色（输入当前值）；
}}
>
更新颜色
);
}

或为您的输入设置单独的状态：

export default function App() {
  const [color, setColor] = React.useState("");
  const [inputValue, setInputValue] = React.useState("");
  return (
    <div className="App">
      <h1>Your Color: {color}</h1>
      <input
        value={inputValue}
        onChange={({ target: { value } }) => {
          setInputValue(value);
        }}
      />
      <button
        onClick={() => {
          setColor(inputValue);
        }}
      >
        Update Color
      </button>
    </div>
  );
}

导出默认函数App（）{
const[color，setColor]=React.useState（“”）；
常量[inputValue，setInputValue]=React.useState（“”）；
返回(
您的颜色：{Color}
{
设置输入值（值）；
}}
/>
{
设置颜色（输入值）；
}}
>
更新颜色
);
}

export default function App() {
  const [color, setColor] = React.useState("");
  const inputRef = React.useRef();
  return (
    <div className="App">
      <h1>Your Color: {color}</h1>
      <input ref={inputRef} />
      <button
        onClick={() => {
          setColor(inputRef.current.value);
        }}
      >
        Update Color
      </button>
    </div>
  );
}

export default function App() {
  const [color, setColor] = React.useState("");
  const [inputValue, setInputValue] = React.useState("");
  return (
    <div className="App">
      <h1>Your Color: {color}</h1>
      <input
        value={inputValue}
        onChange={({ target: { value } }) => {
          setInputValue(value);
        }}
      />
      <button
        onClick={() => {
          setColor(inputValue);
        }}
      >
        Update Color
      </button>
    </div>
  );
}